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();