Backbone 系列之二

先回顾一下，昨天介绍的例子里有两个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组件进行了说明，今天开始介绍Table组件。

首先是模型定义

var Trainset = Backbone.Model.extend({
    url: __SERVICE_URL_PREFIX__ + 'set',
    defaults: function () {
        return {
            pid: '',
            condition: '',
            count: 0
        }
    },
    parse: function (res) {
        if (res.data)
            return res.data;
        return res;
    }
});

var TSList = Backbone.Collection.extend({
    url: __SERVICE_URL_PREFIX__ + 'set',
    model: Trainset,
    modelId: function(attrs) {
        return attrs.condition.replace(',','_');
    },
    parse: function (res) {
        return res.data;
    }
});

由于这里的模型并不是数据库中的一条记录，因此没有自己的_id属性，需要自己定义一个modelId来实现唯一性。

然后就是事件处理

events: {
    'click #taglist_addNew': 'promptAddCondition',
    'click .remove': 'remove'
}

一个是添加事件，另一个是删除事件

添加事件

promptAddCondition: function(e) {
    var self = this;
    layer.prompt({
        title: '请输入标签名称，用空格分隔'
      }, function(value, index, elem){
      layer.close(index);
      self.addCondition(value, self);
    });
},

addCondition: function(condition, self) {
    var cArr = condition.split(" ");
    var condition = cArr.join(",");
    console.log(self.currentID + ": " + condition);
    self.model.create({'pid': self.currentID, 'condition': condition}, {wait: true});
},

由于这里的添加并不是在数据库中添加一条记录，而是在指定记录的conditions属性数组中增加一项，因此需要使用pid字段指定记录的id。
这里仍然使用的是collection的create方法向后台发送请求。

删除事件

remove: function(e) {
    var target = event.target;      
    var id = $(target).attr('data-id');
    var item = this.model.get(id);
    if (item) {
        item.set('id', this.currentID + "|" + id);
        item.destroy({ wait: true });
    }
}

由于我设置了model的destroy方法仅向后台传送model的id，因此需要手工拼接一个id，这个id应该具有的信息包括记录的id和需要删除的condition字符串，在这里，我就简单的用|将这两个信息拼接了起来。

渲染函数

this.model.bind('update', this.render);
render: function (model) {
    console.log("render");
    $('>tbody', this.$viewEl).html(AWFCommon.table2(this, this.dataset, this.model.toJSON()));
}

这里用了一些公司内部的库函数，看看意思就可以了，主要意思就是用更新后的model数据重新刷新Table的内容。

这里其实还有一个非常关键的问题，就是如何形成两个组件之间的联动，即Droplist发生变化后触发Table的刷新，这个问题留到明天再说，Bye！