backbone.js 框架 III

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

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

最后还需要一个主界面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插入到界面中的合适位置。

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

 

window.App = new AppView();