Backbone 系列之一

今天开始准备把这段时间研究Backbone.js的一些体会整理一下，以防未来老年痴呆都忘记了。

有关的基本概念这里就不重复了，主要从实战出发，结合例子进行介绍吧。

示例界面

在这个例子里有两个view组件，一个是Droplist，一个是Table，基本的数据格式如下所示，其中Droplist列出name，选中指定name后，在Table列出conditions数组的内容。

{ "_id" : ObjectId("5ca3f9abd40869ed2f6bb26b"), "conditions" : [ "111", "222" ], "name" : "aaa" }
{ "_id" : ObjectId("5ca3f9abd40869ed2f6bb26c"), "conditions" : [ "333", "444" ], "name" : "bbb" }

今天这节先介绍Droplist组件。

后台对应的数据模型说明如下。

Droplist对应的模型

var Caseset = Backbone.Model.extend({
    url: __SERVICE_URL_PREFIX__ + 'sets',
    defaults: function () {
        return {
            name: ''
        }
    }
});

var Casesets = Backbone.Collection.extend({
    url: __SERVICE_URL_PREFIX__ + 'sets',
    model: Caseset
});

可以看出来模型定义实在是没有啥特别的，就是定义了一个后端API的url。

下面我们先看看绑定了哪些事件

this.casesets = new Casesets(null, { view: this });
this.casesets.bind('update', this.trainsetsRender);

这里定义了Droplist数据模型更改时（update）触发对应的渲染函数。

对应的渲染函数如下

trainsetsRender: function (model) {
    console.log("trainsetsRender");
    var collection = model.collection || model;
    AWFCommon.loadData(this.trainsetsDataset, {data: collection.toJSON()}, {data: ["id", "name"]});
    model.id && $('#trainsets').val(model.id).trigger('change');    
}

这里需要说明的是，渲染函数触发时传入的参数有可能是Collection（调用fetch时），也有可能是Model（调用create时），因此需要在函数内部进行一下判断，并分情况进行处理。

注意界面上有两个按钮，分别是新增和删除，需要定义事件绑定

events: {
    'click #addTrainset': 'promptAddCaseset',
    'click #removeTrainset': 'promptRemoveCaseset'
}

接下来就是重头戏了，新增和删除操作

新增操作

promptAddCaseset: function(e) {
    var self = this;
    layer.prompt({
        title: '请输入新增测试集合名称'
      }, function(value, index, elem){
      layer.close(index);
      self.addCaseset(value, self);
    });
},

addCaseset: function(name, self) {
    console.log(name);
    self.casesets.create({name: name}, {
        wait: true,
        success: function(model) {
            $('#trainsets').val(model.id).trigger('change');
        }
    });
}

第一个函数不用管，就是显示一个输入窗口，要一些信息，重点是第二个函数，这里需要说明的是

1. 需要使用collection的create方法（使用model的save方法也可以，就是还需要手动把model添加到collection中）
2. 必须设置wait=true，否则会在返回id之前就把model添加到collection中，导致后续处理错误
3. 在success的回调函数中需要手动选择新增的对象，并触发事件（这个是和具体业务相关了）

删除操作

promptRemoveCaseset: function(e) {
    var self = this;
    layer.confirm('是否确认删除当前测试集合？', {
      btn: ['确认','取消'] //按钮
    }, function(index){
        layer.close(index);
        self.removeCaseset(self);
    });
},

removeCaseset: function(self) {
    var id = self.currentID;
    console.log("remove " + id);
    var cs = self.casesets.get(id);
    cs && cs.destroy({ wait: true });
},

同样的，第一个函数的作用就是确认一下，第二个函数才是重点，这里我们把需要删除的对象ID存放中view的成员变量里，使用的时候就方便一些了，重点说明如下：

1. 使用model的destroy方法（吐槽一下，collection的remove方法居然只是在列表中把对应项删除，并没有调用后台服务的功能，不知道是什么考虑？）
2. 同样也需要设置wait=true，即等待后台正确删除了再从列表中把对应项删除，否则前后台就可能不一致

好了，今天先到这里，明天继续！