Backbone 学习4
(function($){ var Item=Backbone.Model.extend({ defaults:{ part1:"hello", part2:"world" } }); var List=Backbone.Collection.extend({ model:Item }); var ItemView=Backbone.View.extend({ tagName:'li', initialize:function(){ _.bindAll(this,'render'); }, render:function(){ $(this.el).html("<span>"+this.model.get("part1")+" "+this.model.get("part2")+"</span>"); return this; } }); 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){ var itemView=new ItemView({ model:item }); $("ul",this.el).append(itemView.render().el); } }) var listView=new ListView(); })(jQuery)
posted on 2013-06-08 23:16 Ijavascript 阅读(220) 评论(0) 编辑 收藏 举报