JSFiddle - React, Tailwind, and code Playground

by notjoelshapiro

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id="select_box"></div>

JavaScript

var fruitCollection = new Backbone.Collection([
{name: 'apple', id: 1}, {name: 'banana', id: 2}, {name: 'kiwi', id: 3}, {name: 'raspberry', id: 4}
]);

var SelectBox = Backbone.View.extend({
    tagname: 'select',
    initialize: function(){
        _.bindAll(this, 'addOne', 'addAll');
    },
    addOne: function(fruitName){
        $(this.el).append(new CountryView({ model: fruitName }).render().el);
    },
    addAll: function(){
        this.collection.each(this.addOne);
    }
});

var select = new SelectBox ({
     
});
//new SelectBox({el: $("#country"), collection: fruitCollection});


//$("#select_div").append(select);
//At this point, it should have four options in it.

fruitCollection.add([
{name: 'strawberry', id: 5}, {name: 'starfruit', id: 6}
]);
//The select box should automatically add two more fruit

alert(JSON.stringify(fruitCollection));