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组件，以及两个组件间的通讯进行了说明，今天是这个系列的最后一篇，重点介绍一下总体架构。

首先这个例子包括了一个HTML模版文件和三个JS文件，它们分别是

1. template.html，包括基本的组件及id，完全不含js代码
2. ctrl.js，主控代码，引入并创建组件
3. trainsets.js，Droplist组件代码
4. taglist.js，Table组件代码

先看HTML模版文件

<div data-type="awf-container">
<select id='trainsets' data-type='awf-droplist' data-title="测试集" 
        data-title-width="col-lg-1" data-width="col-lg-3" >
</select>
&nbsp;&nbsp;<button class="addTrainset" data-type="awf-button">新增集合</button>
&nbsp;&nbsp;<button class="removeTrainset" data-type="awf-button">删除集合</button>
</div>

<table id="taglist" data-type="awf-table"  data-title='Cases' data-extBtn="addNew">
    <thead>
        <tr>
            <th>分类标签</th>
            <th>案例数量</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

在这里定义了页面中出现的几个主要组件：Droplist、两个按钮和一个Table。

主控代码ctrl.js

define(['text!./tpl.html', './trainsets', './taglist'], 
function (tpl, Trainsets, Taglist) {
    var controller = function () {      
        $navView.trigger("routeChange", "n303");
        $appView.html(tpl).trigger("htmlChanged");          

        var trainsets = new Trainsets();    
        var taglist = new Taglist();
        
        trainsets.load();
        
        controller.onRouteChange = function () {
            trainsets.undelegateEvents();
            taglist.undelegateEvents();
        };
    };
    return controller;
});

引入了另外三个文件，并创建了Trainsets组件和Taglist组件，调用load函数进行初始化。

这样整个页面的模块化划分就比较清晰了，在这里模块化的作用并不一定是要进行复用，而是便于维护，通过把不同功能划分成不同模块，模块之间使用松耦合的消息队列方式进行通信，实现了故障隔离和代码的精简，更便于查找错误和增加新功能。

系列回顾链接
Backbone系列之一
Backbone系列之二
Backbone系列之三
Backbone系列之四