Backbone实践案例

By：软件11 王思伦 2013-10-4

Backbone简述：

Backbone基于MVC架构，用于开发重量级Javascript应用的框架。

如上文所述，Backbone包含多种类，但主要包含了三种：Backbone.Model, Backbone.Collection, Backbone.View。

它能让你像写 java 代码一些写 js 代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的 javascript 代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。

另外backbone必须要依赖另一个文件：underscore.js(包含许多工具方法，集合操作，js模板等等)，我在做backbone测试的时候就因为没有包含underscore.js搞得无法显示一头雾水。

Backbone主体介绍：

Backbone.Model表示应用中所有数据，model中的数据可以创建(new)、校验(validate)、销毁(destroy)和保存到服务端(localstorage)。当models中值被改变时自动触发一个"change"事件(Backbone.Event)、所有用于展示model数据的view都会侦听到这个事件，然后进行重新渲染(render)。

Backbone.Collection有点像JAVA集合类(list/vector)，具有增加元素，删除元素，获取长度，排序，比较等一系列工具方法，简而言之是一个保存models的集合类。

Backbone.View中可以绑定dom element和客户端事件，一个view可以对应一个element。页面中的html就是通过view的render方法渲染出来的，当新建一个view的时候通过要传进一个model作为数据，例如：

var view = new EmployeeView({model:employee});

 　　也就是说model就是以这种方式和view进行关联的。

Model

声明：

　　在创建Model或者View等backbone类的时候，我们总会使用如下语句：Backbone.Model.extend 

window.Employee = Backbone.Model.extend({  
    validate:function(attrs){  
    }  
});

　　其中使用了extends继承model和view，因此models的创建，销毁，校验等一系列改变都会触发相应的事件

实例化：

　　声明Employee类之后就可以新增一个Employee的实例对象了：

var employee = new Employee();

赋值：

　　Employee类中不必声明ID、姓名等业务字段。当需要给employee设置这些信息时候，只需要调用

employee.set({'id':1,'name':'Jason'});

校验：

　　当然，如果需要对employee的信息进行校验，需要给Employee类配置一个validate方法，这个方法的参数attrs就是set进去的json数据。这样，当employee里面的数据每次发生改变的时候都会先调用这个validate方法。

Collection

　　Model类定义好之后就可以开始定义集合类Collection了，在集合类里面可以对里面的每个Model进行增加，删除等一系列操作，还可以调用fetch方法从server端获取集合的初始值。

window.EmployeeList = Backbone.Collection.extend({  
    model : Employee,  
    // 持久化到本地数据库  
    localStorage: new Store("employees"),  
      
});  
window.Employees = new EmployeeList();

 

　　设置 localStorage属性后Employees里面的数据自动会同步保存到本地数据库里面，每当调用Employees.fetch()后又会从localStorage里面恢复数据。

 

View

　　View类主要负责一切和界面相关的工作，比如绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等：

window.EmployeeView = Backbone.View.extend({  
        tagName : 'tr',  
        template : _.template($('#item-template').html()),  
        events : {  
            "dblclick td" : "edit",  
            "blur input,select" : "close",  
            "click .del" : "clear",  
        },  
        initialize : function(){  
            // 每次更新模型后重新渲染  
            this.model.bind('change', this.render, this);  
            // 每次删除模型之后自动移除UI  
            this.model.bind('destroy', this.remove, this);  
        },  
        setText : function(){  
            var model = this.model;  
            this.input = $(this.el).find('input,select');   
            this.input.each(function(){  
                var input = $(this);  
                input.val(model.get(input.attr("name")));  
            });  
        },  
        close: function(e) {  
            var input = $(e.currentTarget);  
            var obj = {};  
            obj[input.attr('name')] = input.val();  
            this.model.save(obj);  
            $(e.currentTarget).parent().parent().removeClass("editing");  
        },  
        edit : function(e){  
            // 给td加上editing样式  
            $(e.currentTarget).addClass('editing').find('input,select').focus();  
        },  
        render: function() {  
            $(this.el).html(this.template(this.model.toJSON()));  
            // 把每个单元格的值赋予隐藏的输入框  
            this.setText();  
            return this;  
        },  
        remove: function() {  
            $(this.el).remove();  
        },  
        clear: function() {  
          this.model.destroy();  
        }  
    });

 　　这个类里面的代码比较多，但主要和界面的渲染有关。一个EmployeeView对象对应table里面的一个tr元素。每次new一个EmployeeView对象的时候都会先调用initialize方法，这个方法里面绑定的事件确保了tr元素对应的model值每次发生改变或者被删除时都会同步到界面。也就是说当每次操作界面对数据进行修改后都是先把当前的变更保存到view绑定的model对象里面，然后model里面的事件机制会自动触发一个"change"事件对界面进行修改。

　　template中使用的方法_.template($('#item-template').html())是前面提到的underscore.js中提供一个工具方法，可以通过界面的HTML模板和一个JSON生成动态的HTML，说白了就是把JSON里面的值填充到HTML模板中对应的占位符里面去，HTML模板里面还支持一些常用的逻辑表达式如if, else, foreach等。

　　setText方法主要负责把model里面的数据设置到每个tr里面的隐藏输入域里面。

 

　　close方法被绑定到了input和select元素的blur事件中。当用户对单元格数据进行修改后都会把鼠标点击到界面其他地方然后输入框会自动隐藏并且把修改的数据显示在表格上面。close方法首先从当前被编辑的元素中拿到最新值，然后封装成一个对象，调用model的save方法后首先执行model的validate方法，如果校验通过则保存到本地存储并触发"change"事件。

Application:

最后还需要一个主界面View，这个View主要绑定了界面中的录入表单的“增加”按钮事件，Employees的相关事件以及页面初始化时从本地存储中恢复数据：

window.AppView = Backbone.View.extend({
        el : $("#app"),
        events : {
            "click .#add-btn" : "createOnEnter"
        },
        // 绑定collection的相关事件
        initialize: function() {
            Employees.bind('add', this.addOne, this);
            // 调用fetch的时候触发reset
            Employees.bind('reset', this.addAll, this);
            Employees.fetch();
        },
        createOnEnter : function(e) {
            var employee = new Employee();
            var attr = {};
            $('#emp-form input,#emp-form select').each(function(){
                var input = $(this);
                attr[input.attr('name')] = input.val();
            });
            employee.bind('error',function(model,error){
                alert(error);
            });
            // set方法中会自动调用model的validate方法进行校验，如果不通过则返回false
            if(employee.set(attr)){
                Employees.create(employee);
            }
        },
        addOne : function(employee){
            employee.set({"eid":employee.get("eid")||Employees.length});
            employee.bind('error',function(model,error){
                alert(error);
            });
            var view = new EmployeeView({model:employee});
            $(".emp-table tbody").append(view.render().el);
        },
        addAll : function(){
            Employees.each(this.addOne);
        }
    });

　　initialize方法中绑定了Employees的add和reset事件，也就是说每当往Employees中添加一个model的时候都会调用AppView的addOne方法，这个方法主要绑定了model的error事件以及把EmployeeView生成的html插入到界面中的合适位置。

 

　　万事俱备，整个应用的初始化方法就是AppView的initialize方法，因此只需要新建一个AppView就可以了：

window.App = new AppView();

参考资料：http://weakfi.iteye.com/blog/1391990