backbone入门小例子

最近听了个backbone的分享，为了避免听不懂，就先做了个小例子

例子很简单，效果如下

基本视图模板：

 <script type="tex/template"  id="template"   >
 <span><%=val%></span><span class="swap" style="margin:10px;cursor:pointer;">swap</span><span class="delete" style="margin:10px;cursor:pointer;">delete</span>
 </script>

构建基本数据模型和集合：

     var Man=Backbone.Model.extend({
         defaults:{
             name:'张三',
             age:'1'
         },
     });
     var ManList = Backbone.Collection.extend({
         model:Man
     })

基本的视图模型

 var ItemView = Backbone.View.extend({
         tagName:'li',
         /*为视图注册事件*/
         events:{
             "click span.swap":"swap",
             "click span.delete":"remove"
         },
         initialize:function(){
             /*为视图和模型绑定事件*/
             _.bindAll(this, 'swap','render','remove','unrender');
             this.model.bind('change',this.render);
             this.model.bind('remove',this.unrender);
         },
         render:function(){
             var val = this.model.get('name')+""+this.model.get('age');
             var html = _.template($("#template" ).html(), {val:val});
             $(this.el).html(html);
             return this;
         },
         unrender:function(){
             $(this.el).remove();
         },
         swap:function(){
             var swaped = {
                 name:this.model.get('age'),
                 age:this.model.get('name')
             }
             this.model.set(swaped);
         },
         remove:function(){
             this.model.destroy();
         }
     })

主视图模型

     var ListView = Backbone.View.extend({
         el:$("body"),
         events:{
             "click button#add":"addItem"
         },
         initialize:function(){
             /*为主视图和集合绑定事件*/
             _.bindAll(this, 'render', 'addItem', 'appendItem');
             this.collection = new ManList();
             this.collection.bind('add', this.appendItem);
             /*初始化主视图*/
             this.render();
             /*声明主视图的属性*/
             this.age = 1;
         },
         addItem:function(){
             this.collection.add(new Man({age:this.age++}))
         },
         appendItem:function(item){
             var itemView = new ItemView({
                 model: item
              });

             $(this.el).find('ul').append(itemView.render().el);
         },
         render:function(){
             var self = this;
             $(this.el).append('<button id="add">add item</button>');
             $(this.el).append("<ul></ul>");

         }
     })

初始化视图

 var listView = new ListView();