一、前言

CollectionView的视图可以通过一个单一的父DOM元素或el来管理一组有序的子视图，这些子视图显示在主视图的el中。这些子视图通常是为了匹配Backbone.Collection的模型而创建的。那我们要怎么在视图里编写CollectionView呢？且听我慢慢唠唠

二、关于CollectionView

1. 实例化一个CollectionView

当实例化一个CollectionView时，有如下几个属性，可以直接附加到实例上： attributes,behaviors, childView, childViewContainer, childViewEventPrefix,childViewEvents, childViewOptions, childViewTriggers, className, collection, collectionEvents, el, emptyView, emptyViewOptions, events, id, model, modelEvents, sortWithCollection, tagName, template, templateContext, triggers, ui, viewComparator, viewFilter

其中一些属性来自于Marionette，但很多是继承自Backbone.View

const myCollectionView = new CollectionView({ ... });

2. 渲染一个CollectionView

CollectionView的render方法主要负责渲染整个集合。它循环浏览集合中的每个子集，并将它们作为一个子集单独渲染。

const MyCollectionView = CollectionView.extend({...}); 
// 所有的子视图都将会被渲染呈现出来 
new MyCollectionView().render();

• 渲染模板

除了渲染子视图外，CollectionView还可以有一个模板。子视图可以在这个模板的DOM元素中被渲染。CollectionView会将模型或集合连同上下文一起序列化，以便模板渲染。

• 重新渲染CollectionView

如果你需要重新渲染整个集合或模板，你可以调用collectionView.render方法。这个方法将销毁所有之前可能已经添加的子视图。

3. 视图生命周期和事件

一个实例化的CollectionView会意识到它的生命周期状态，并且会抛出与该状态变化有关的事件。视图状态表明视图是否被渲染、连接到DOM上，或者被销毁。

4. 实体事件

CollectionView可以绑定发生在附加模型和集合上的事件。

5. DOM交互效果

除了Backbone提供的视图之外，Marionette还有额外的API用于DOM交互：events, triggers和ui。

默认情况下，ui只与模板内的元素绑定。然而，由于事件和触发器被委托给视图的el，它们将适用于任何子元素。在某些情况下，当你想用getUI()访问CollectionViews内的元素时，绑定ui是有帮助的。对于这些情况，你需要自己绑定ui。要做到这一点，在CollectionView上运行bindUIElements。

const MyCollectionView = CollectionView.extend({ 
    // ... ui: { checkbox: 'input[type="checkbox"]' 
} });
const collectionView = new MyCollectionView(); 
collectionView.bindUIElements();
console.log(collectionView.getUI('checkbox')); 

7. 管理子节点

一旦CollectionView被渲染，子节点就会被自动管理。对于集合中的每个模型，CollectionView会在其子对象中建立并存储一个子视图。这允许你轻松地访问集合视图中的视图，迭代它们，通过一个给定的索引器（如视图的模型或ID）找到它们等等。

在最初的渲染之后，CollectionView会绑定到集合的更新和重置事件。

当视图的集合被重置时，视图将销毁所有的孩子并重新渲染整个集合。

当一个模型被添加到集合中时，CollectionView会将该模型渲染到子集中。

当一个模型从集合中移除（或销毁/删除），CollectionView将销毁并移除该模型的子视图。

当视图的集合被排序时，除非CollectionView的sortWithCollection属性被设置为false，或者viewComparator为false，否则视图默认会自动重新排序其子视图。

8.传递数据到子视图

在某些情况下，你可能需要将数据从父集合视图传递到每个子视图实例中。要做到这一点，在你的集合视图上定义一个childViewOptions，作为一个对象字面。这将作为选项的一部分传递给childView的构造函数。

你也可以将childViewOption指定为一个函数，如果你需要在运行时计算返回的值。如果你在计算childViewOptions时需要访问该模型，该模型将被传递到该函数中。该函数必须返回一个对象，并且该对象的属性将被复制到childView实例的选项中。

三、编写CollectionView

1.在主视图中实例化并渲染一个CollectionView

2.子页面视图中编写相关业务操作

四、更多相关

最后，如果想了解更多关于Marionette.CollectionView的相关操作，可点击跳转原文档Marionette.CollectionView