3.js

(function($){

var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
 

var List = Backbone.Collection.extend({
model: Item
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},

initialize: function() {
_.bindAll( this, 'render', 'addItem', 'appendItem' );

this.collection = new List();
this.collection.bind('add', this.appendItem );

this.counter = 0;
this.render();
},

render: function() {
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item) { self.appendItem( item ); }, this );
},

addItem: function() {
this.counter++;
var item = new Item();
item.set({part2: item.get('part2') + this.counter});
this.collection.add( item );
},


appendItem: function(item) {
$('ul', this.el).append("<li>" + item.get('part1') + " " + item.get('part2') + "</li>");
}
});

var listView = new ListView();
}) (jQuery);