今天开始准备把这段时间研究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');
}
});
}
第一个函数不用管，就是显示一个输入窗口，要一些信息，重点是第二个函数，这里需要说明的是
- 需要使用collection的create方法（使用model的save方法也可以，就是还需要手动把model添加到collection中）
- 必须设置wait=true，否则会在返回id之前就把model添加到collection中，导致后续处理错误
- 在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的成员变量里，使用的时候就方便一些了，重点说明如下：
- 使用model的destroy方法（吐槽一下，collection的remove方法居然只是在列表中把对应项删除，并没有调用后台服务的功能，不知道是什么考虑？）
- 同样也需要设置wait=true，即等待后台正确删除了再从列表中把对应项删除，否则前后台就可能不一致
好了，今天先到这里，明天继续！
系列回顾链接
Backbone系列之一
Backbone系列之二
Backbone系列之三
Backbone系列之四