$(function() {
// *** MODELS ***
window.Item = Backbone.Model.extend({
defaults: {
name: "-",
ordinal : 0
}
});
// *** COLLECTIONS ***
window.ItemList = Backbone.Collection.extend({
model: Item
});
window.Items = new window.ItemList([
{name: "Item #1", ordinal: 1},
{name: "Item #2", ordinal: 2},
{name: "Item #3", ordinal: 3}
]);
// *** VIEWS ***
window.ItemEntryView = Backbone.View.extend({
el: $('.itemEntry'),
events: {
"click .add": "addItem"
},
addItem: function() {
var itemName = this.$("#itemName").val();
var view = new ItemsView();
var item= new Item({name:itemName});
view.add(item);
}
});
window.ItemView = Backbone.View.extend({
className: 'item',
tagName: "li",
events: {
"click": "toggle"
},
initialize: function () {
_.bindAll(this);
this.model.bind('change', this.render, this);
},
render: function () {
$(this.el).html(this.model.get('name'));
if (this.model.get('selected')) {
$(this.el).addClass('selected');
} else {
$(this.el).removeClass('selected');
}
return this;
},
toggle: function () {
if (this.model.get('selected')) {
this.model.set({ selected: false });
}
else {
this.model.set({ selected: true });
}
}
});
window.ItemsView = Backbone.View.extend({
collection: window.Items,
el: $('.items'),
initialize: function(){
_.bindAll(this);
this.collection.bind('reset', this.render);
this.collection.bind('add', this.add);
},
add: function(item) {
var vItem = new window.ItemView({ model: item });
this.el.append(vItem.render().el);
},
render: function() {
var self = this;
this.collection.each(function(item){
self.add(item);
});
return this;
}
});
// View to initialize app.
window.AppView = Backbone.View.extend({
render: function () {
new window.ItemEntryView();
new window.ItemsView().render();
}
});
new window.AppView().render();
});
<div class="content">
<div class="itemEntry">
<input id="itemName" type="text" style="width:200px"/>
<input type="button" value="Add" class="add" />
</div>
<div class="items">
<ul class="list"></ul>
</div>
</div>
.selected {background:#e0e0e0;}
.item {border:solid 1px #000;margin:2px;cursor:pointer;}
.items {border:solid 1px #000;width:200px;}
External resources loaded into this fiddle: