使用 Backbone.Marionette 管理复杂 UI 交互

完整的 tutorial 代码 戳这里 ， 因为我使用的是 commonjs 规范，基于 spm 的，你可以先安装,然后运行它。 更多 spm 资料

// 安装 npm install spm -g  // 运行 spm server

这个 repo 是我学习各种技术栈的一个集合，如果是初学者，可以跟我一起来学习，也可以私信我。

你也可以 find me on GitHub

很多人抱怨和吐槽 Backbone , 觉得它太简单了。什么事都要自己做。然而，Backbone 的优点也是它太简单了，它的思想就是不作任何绑定， 只提供一个骨架。正如 Backbone 的中文意思。

所以大量的问题都留给开发者自己想办法来解决，因此遭到吐槽...

当然，使用纯 Backbone 开发一个复杂应用时，情况就会变得非常糟糕。

纯 Backbone 的工作流程是这样的： MVP

                      events                               commands Template/DOM (View) ----------> Backbone.View (Presenter) ----------> Backbone.Model (Model)         |                           |         |                                 |         |            updates        |         |             events              |         |<--------------------------|         |<--------------------------------| 

其中涉及的问题有：

1. 业务逻辑 : model 和 collection 处理大部分逻辑。他们对应着服务端后台的资源，也对应着视图显示的类容。

2. 构建 DOM ：一般是 handlebars。

3. 视图逻辑 ：Backbone.View ，其中的逻辑要自己维护。

4. 视图和模型同步 : 自己维护。

5. 管理复杂的 UI 交互 ：自己维护。

6. 管理状态和路由 ：Backbone.Router（不支持管理视图和应用状态）

7. 创建与连接组件 : 手动实现。

管理复杂的 UI 交互

那么，这篇文章着重于讲 UI 交互，所有的 UI 交互都可以被划分为：

1. 简单交互 ：使用观察者同步（Observer Synchronization），被动控制显示，操作 DOM 事件来改变集合模型，视图监听集合模型的变化来改变自身。Backbone.View 就是这样工作的。

2. 复杂交互 ：使用流同步（Flow Synchronization），主动控制显示 SUPERVISING PRESENTERS

使用 Marionette 工作流程是这样的：

    events for        complex interactions      notice Template/DOM (View) ----------------------> Marionette.View (Presenter) ------------> Backbone.Model (Model)  |        | |    |  |        complex updates      | |      events      |  |<------------------------------------------| |<-------------------------------|             |    |             | simple updates   |             |------------------------------->|  

视图 View & 区域 Region

Marionette 扩展了非常丰富的视图 View 组件： ItemView CollectionView CompositeView LayoutView .

不仅于此，Marionette 还使用 Region （区域）来配合 View （视图）。

一般会先添加一个 Region 来定位一块地方，再决定这块地方显示哪个 View 。

// 你可以理解为一个中心 APP 对象。当一切准备就绪的时候，调用 App.start(options) 启动应用。 var MyApp = new Backbone.Marionette.Application();  // 添加一个 region，它对应一个 dom 节点 App.addRegions({   mainRegion: '#content' });  // 让这个 region 显示一个视图, 这个视图会立即渲染 App.mainRegion.show(new MyView());

从头说起吧，你可能注意到了，上面实例化了一个 Marionette.Application 对象。

通常需要定义一个 App ，通过 Initializers 把所有的事都绑定在上面。等待 start 方法调用的时候，开始执行。

// start 方法调用后，立即执行 Initializers MyApp.addInitializer(function(options) {   // 实例化 compositeView   var angryCatsView = new AngryCatsView({     collection: options.cats   });   // 显示这个视图   MyApp.mainRegion.show(angryCatsView); })  MyApp.start({cats: cats});

这里只绑定了一个 Initializer，在一个复杂的应用中，你可能会绑定多个的。start(options) 中的参数 options 会传递个每个 Initializer。

通过扩展 Backbone.Events, 实现 Aspect（切面编程） 你可以监听这些事件，让应用更加灵活。

App.on('initialize:before', function(options) {  // doSomething... }); App.on('initialize:after', function(options) {  // doOtherthing... }); App.on('start', function(options) {   Backbone.history.start(); }); 

好了，现在已经知道了 Marionette 是怎么启动的了，下一步是了解它是怎么管理视图 View 的。

LayoutView

布局视图，比如你的界面上可能用 header main footer 等区域。

<div id="content">   <div id="header"></div>   <div id="main"></div>   <div id="footer"></div> </div>

你可以这样来定义布局视图，这样你就掌控全局了。

 var RootLayout = Backbone.Marionette.LayoutView.extend({    el: '#content',    regions: {     header: '#header',     main: '#main',     footer: '#footer'   }  })

一般会把这个 root 挂载到 App 上。

var MyApp = Backbone.Marionette.Application.extend({   setRootLayout: function () {     this.root = new RootLayout();   } });  // App 启动前，实例化它，得到 App.root MyApp.on('before:start', function () {   MyApp.setRootLayout(); });

现在 App 上有了 root 的控制权了，可以任意设置某个区域显示某个视图了。

MyApp.root.showChildView('header', new HeaderLayout());

ItemView 与 CompositeView

单条记录 Model 对应 ItemView, CompositeView 不仅对应的是一个包含 ItemView ，还对应有其他一些相关视图.

他们通常在一起使用，并且 ItemView 是 CompositeView 的 childView 属性值。

比如这样两个 template

<!-- CompositeView 模板 --> <thead>   <tr><th>Name</th></tr> </thead> <tbody> </tbody>  <!-- ItemView 模板 --> <tr><td>{{name}}</td></tr>

我需要在 tbody 标签下加入多个 ItemView。这样你就需要使用 childViewContainer 来指定 childView 被加在什么地方。

很显然此处： {childViewContainer: 'tbody'} .

这里是以上代码

var AngryCatView = Backbone.Marionette.ItemView.extend({   template: require('./tpl/angrycat.handlebars'),   tagName: 'tr',   className: 'angry_cat' });  var AngryCatsView = Backbone.Marionette.CompositeView.extend({    tagName: 'table',   id: 'angry_cats',   className: 'table-striped table-bordered',    template: require('./tpl/angrycats.handlebars'),    childView: AngryCatView,    childViewContainer: 'tbody'  })

细心的童鞋应该已经注意到了，模板中为什么不用 table 标签包裹起来。这是因为 Marionette 会为你包裹一层，若你不指定 tagName 则默认是 div 标签。 指定的 className , id 属性也是加在这层上面的。

纯 Backbone 代码需要自己来实现 render 渲染 DOM，在这里 Marionette 通过指定的 template 属性自动渲染了。

重点 在 这一层 我们要做的是监听 Model，Collection 的变化，来同步视图。和 Backbone 做法一样。不同的是，Marionette 可以指定是全部重绘（render）还是部分重绘（renderCollection）

Event Aggregator

事件聚合器，这个东西主要是用来解耦的，例如：从 ItemView 上来个事件，改变了 model 的属性。影响了集合的排列。需要更新到 CompositeView 上。

在 ItemView 中调用 CompositeView ？ 这样做是不对的，因为会让应用越来越复杂的。视图 View 也不应该去处理 business logic。

使用 Event Aggregator 会让程序解耦，它相当于一种 Publish/Subscribe 模式。视图只需要去通知 notice 模型 Model or Collection 来处理。

MyApp.trigger('rank:up', this.model);

在模型 Model or Collection 初始化的时候就要 Subscribe 订阅事件 rank:up

MyApp.on('rank:up', function(cat) {   if (cat.get('rank') === 1) {     return true;   }   self.rankUp(cat);   self.sort(); })

这样的话，business logic 就是在 Model or Collection 中维护的。

以上总结

1. Marionette.View 在 Backbone.View 之上多做了很多事情，包括自动渲染和重绘等等。

2. Marionette.View 接到 Dom 事件后，可以通知 notice 集合 Collection 去处理。也可以直接命令 commands 模型 Model 去处理。

（这里只介绍了一些入门知识 Marionette 未完待续...）