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组件进行了说明，今天要介绍的是组件间的通讯。

这里首先引入一个Backbone的插件：Backbone.radio。这个插件的作用就是为Backbone的Event机制增加了两种方式request和channel。其中request就是1v1的消息通信，而channel就是消息中间件中常见的主题-订阅模式。

首先来看消息发出方Droplist的代码

events: {
    'change #trainsets': 'fireChange'
},

fireChange: function(e) {
    var target = e.target;      
    var id = $(target).val();
    Backbone.Radio.trigger('msg', 'trainsets:change', id);
},

DOM组件发出change事件，触发fireChange回调函数，函数中取得对应的id后，利用Backbone.Radio的channel机制发出事件和相关参数。这里trigger的参数分别为：

• msg：channel的名字
• transits:change：事件的名字
• id：参数

接下来看接收方Table的代码

Backbone.Radio.on('msg', 'trainsets:change', this.read);

read: function(id) {
    if (id && id != this.currentID) {
        console.log(id);
        this.currentID = id;
        this.model.fetch({data: {op:"fetch", id:id}});  
    }
}

首先是用on函数进行消息绑定，read为回调函数，然后在回调函数中接收参数id，并据此进行相应的操作。

需要说明的是，对channel消息的绑定是可以1vN的，而且消息发出方并不需要知道消息接收方是谁，非常符合消息队列的使用习惯。

这几天对各种核心功能进行了微观解剖，明天继续介绍这个例子的整体结构。