Backbone 学习3

(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 slef=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)