Marionette.CollectionView

　Marionette.CollectionView

CollectionView将循环指定集合的所有模型，使用指定的childView来呈现每个模型，然后将子视图的el附加到集合视图的el上。默认CollectionView将在ＤＯＭ中保持排序的集合.这个行为可以通过指定{sort:false}来在初始化时关闭.

CollectionView直接继承自Marionette.AbstractView.请看Marionette.AbstractView文档来学习关于特性和功能的更多信息.

另外,与Marionette.Region的交互将提供比如onShow回调等更多的特性.请看Region文档来学习详细.

文档目录

CollectionView的childView

     CollectionView的childViewOptions

　　CollectionView的childViewEventPrefix

　　CollectionView的childViewEvents

　　CollectionView的buildChildView

　　CollectionView的addChild

　　CollectionView的setFilter

　　CollectionView的removeFilter

　　CollectionView的reorderOnSort

CollectionView的emptyView

　　CollectionView的getEmptyView

 　　CollectionView的isEmpty

　　CollectionView的emptyViewOptions

　　CollectionView的destroyChildren

回调方法

　　onBeforeRender回调

  　onRender回调

 　onBeforeReorder回调

　　onReorder回调

　　onDestroy回调

　　onBeforeDestroy回调

　　onDestroy回调

　　onBeforeAddChild回调

　　onAddChild回调

　　onBeforeRemoveChild回调

　　onRemoveChild回调

CollectionView  事件

　　"before:render"事件

　　"render"事件

　　"before:any:filter"/"apply:filter"事件

　　"before:reorder"/"reorder"事件

　　"before:destroy"事件

　　"destroy/"destroy:children"事件

　　"before:add:child"/"add:child"事件

　　"before:remove:child"事件

　　"remove:child"事件

　　从子视图中冒泡的"childview:*"事件

　　"before:render:children"事件

　　"render:children"事件

　　"before:render:empty"事件

　　"render:empty"事件

CollectionView 子视图事件

CollectionView呈现

CollectionView:自动呈现

CollectionView:重新呈现Collection

CollectionView的attachHtml

CollectionView的resortView

CollectionView的viewComparator

CollectionView的filter

CollectionView的children

CollectionView 销毁

CollectionView的childView

在你的集合视图定义中指定childView.这必须是Backbone视图对象定义,不是实例.它可以为任何BackView或继承自Marionette.View

var MyChildView = Marionette.View.extend({});

Marionette.CollectionView.extend({
  childView: MyChildView
});

　　

子视图必须在集合视图定义引用前首先被定义.

选择性的,你也可以在构造函数的options选项中指定childView

var MyCollectionView = Marionette.CollectionView.extend({...});

new MyCollectionView({
  childView: MyChildView
});

　　

如果你没有指定childView,将抛出你必须指定childView的意外.

你也可以定义函数当作childView.在这种形式中,函数的返回值是ChildView类,当Model需要初始化呈现时这个类将实例化.这种方法也让你可以自定义每个Model的ChildView.

var FooBar = Backbone.Model.extend({
  defaults: {
    isFoo: false
  }
});

var FooView = Marionette.View.extend({
  template: '#foo-template'
});
var BarView = Marionette.View.extend({
  template: '#bar-template'
});

var MyCollectionView = Marionette.CollectionView.extend({
  childView: function(item) {
    // Choose which view class to render,
    // depending on the properties of the item model
    if  (item.get('isFoo')) {
      return FooView;
    }
    else {
      return BarView;
    }
  }
});

var collectionView = new MyCollectionView();
var foo = new FooBar({
  isFoo: true
});
var bar = new FooBar({
  isFoo: false
});

// Renders a FooView
collectionView.collection.add(foo);

// Renders a BarView
collectionView.collection.add(bar);

　　

CollectionView的childViewOptions

有时会有需要从父集合的视图传递数据到每个childView实例的时候.这时,在你的集合视图中定义childViewOptions作为对象字面量.将传递给你的childView的构造函数作为options的一部分.

var ChildView = Marionette.View.extend({
  initialize: function(options) {
    console.log(options.foo); // => "bar"
  }
});

var CollectionView = Marionette.CollectionView.extend({
  childView: ChildView,

  childViewOptions: {
    foo: "bar"
  }
});

　　

你也可以指定childViewOptions作为函数,如果你需要在运行时计算返回值.模型将传递进函数来计算childViewOptions.函数必须返回对象,对象的属性复制给childView实例的options.

var CollectionView = Marionette.CollectionView.extend({
  childViewOptions: function(model, index) {
    // do some calculations based on the model
    return {
      foo: "bar",
      childIndex: index
    }
  }
});

　　

CollectionView的childViewEventPrefix

你可以通过集合视图自定义事件前缀来为子视图提前定义事件.可以设置childViewEventPrefix,详细请看'childview:*'从子视图的事件冒泡.　

var CV = Marionette.CollectionView.extend({
  childViewEventPrefix: "some:prefix"
});

var c = new CV({
  collection: myCol
});

c.on("some:prefix:render", function(){
  // child view was rendered
});

c.render();

　　

childViewEventPrefix可以在视图定义时提供,或者在构造函数中定义.

CollectionView的childViewEvents

childViewEvents hash或方法允许不需手动绑定就可以处理子视图的事件.hash值可以是函数或集合视图上的方法名字字符串.

// childViewEvents can be specified as a hash...
var MyCollectionView = Marionette.CollectionView.extend({

  childViewEvents: {
    // This callback will be called whenever a child is rendered or emits a `render` event
    render: function() {
      console.log('A child view has been rendered.');
    }
  }
});

// ...or as a function that returns a hash.
var MyCollectionView = Marionette.CollectionView.extend({

  childViewEvents: function() {
    return {
      render: this.onChildRendered
    }
  },

  onChildRendered: function () {
    console.log('A child view has been rendered.');
  }
});

　　

childViewEvents也可以捕捉子视图的自定义事件.注意childViewEvents处理器的第一个参数是子视图自身.

// The child view fires a custom event, `show:message`
var ChildView = Marionette.View.extend({

  // Events hash defines local event handlers that in turn may call `triggerMethod`.
  events: {
    'click .button': 'onClickButton'
  },

  // Triggers hash converts DOM events directly to view events catchable on the parent.
  triggers: {
    'submit form': 'submit:form'
  },

  onClickButton: function () {
    // Both `trigger` and `triggerMethod` events will be caught by parent.
    this.trigger('show:message', 'foo');
    this.triggerMethod('show:message', 'bar');
  }
});

// The parent uses childViewEvents to catch the child view's custom event
var ParentView = Marionette.CollectionView.extend({

  childView: ChildView,

  childViewEvents: {
    'show:message': 'onChildShowMessage',
    'submit:form': 'onChildSubmitForm'
  },

  onChildShowMessage: function (childView, message) {
    console.log('A child view fired show:message with ' + message);
  },

  onChildSubmitForm: function (childView) {
    console.log('A child view fired submit:form');
  }
});

　　

CollectionView的buildChildView

当自定义的视图实例需要代表childView来创建时,覆盖buildChildView方法.这个方法需要三个参数,返回用作子视图的视图实例.

buildChildView: function(child, ChildViewClass, childViewOptions){
  // build the final list of options for the childView class
  var options = _.extend({model: child}, childViewOptions);
  // create the child view instance
  var view = new ChildViewClass(options);
  // return it
  return view;
},

　　

CollectionView的addChild

addChild方法负责将呈现子视图,而且将它们添加到CollectionView实例的HTML中.也负责触发每个ChildView的事件.大多数情况下你应该不重载此方法.然而如果你想要简化或修饰此方法,可以通过下面完成.

Marionette.CollectionView.extend({
  addChild: function(child, ChildView, index){
    if (child.shouldBeShown()) {
      Marionette.CollectionView.prototype.addChild.apply(this, arguments);
    }
  }
});

　　

CollectionView的setFilter

setFilter方法修改CollectionView的filter属性,并且以高效率的方式呈现新的ChildView.而不是再次呈现整个ＤＯＭ结构．另外，通过before:apply:filter和apply:filter事件来触发.preventRender选项可以阻止视图呈现.

var cv = new Marionette.CollectionView({
  collection: someCollection
});

cv.render();

cv.setFilter(function(child, index, collection) {
  return child.get('value') % 2 === 0;
});

　　

CollectionView的removeFilter

这个函数其实是setFilter(null,options)的别名.对于移除过滤器有用.removeFilter也接受preventRender作为选项.

var cv = new Marionette.CollectionView({
  collection: someCollection
});

cv.render();

cv.setFilter(function(child, index, collection) {
  return child.get('value') % 2 === 0;
});

cv.removeFilter({ prevent: true });
//Remove the current filter without rendering again.

　　

CollectionView的reorderOnSort

这个选项对于当你重新排序你的CollectionView时同时性能高效时有用.不用此选项,你的CollectionView将全部重新呈现,如果你的子视图很复杂或者子视图有大量元素时性能成本很高.如果选项激活,当你排序你的集合时,将不会重新呈现,而是仅仅DOM节点重新排序.如果你的子视图在呈现时使用了集合的索引时会存在问题,这种情况下,你不能使用此选项因为你需要重新呈现每个ChildView.

如果你将此选项和改变显示的视图的filter联合使用,reorderOnSort将在呈现新子视图时被使用,然后移除filter排除的子视图.

CollectionView的emptyView

var NoChildrenView = Marionette.View.extend({
  template: "#show-no-children-message-template"
});

Marionette.CollectionView.extend({
  // ...

  emptyView: NoChildrenView
});

　　

当集合中没有子视图时,你需要呈现一个视图而不是子视图列表,你可以指定集合视图的emptyView属性.

CollectionView的getEmptyView

如果你需要动态选择emptyView类,可以指定getEmptyView:

Marionette.CollectionView.extend({
  // ...

  getEmptyView: function() {
    // custom logic
    return NoChildrenView;
  }
});

　　

CollectionView的isEmpty

如果你想控制何时空视图呈现,你可以重载isEmpty:

Marionette.CollectionView.extend({
  isEmpty: function(collection, options) {
    // some logic to calculate if the view should be rendered as empty
    return someBoolean;
  }
});

　　

CollectionView的emptyViewOptions

和childView和childViewOptions类似,emptyViewOptions属性用于传递给emptyView构造函数中.可以提供为对象字面量或函数.

如果emptyViewOptions没有提供,CollectionView将默认使用传递childViewOptions给emptyView.

var EmptyView = Marionette.View({
  initialize: function(options){
    console.log(options.foo); // => "bar"
  }
});

var CollectionView = Marionette.CollectionView({
  emptyView: EmptyView,

  emptyViewOptions: {
    foo: "bar"
  }
});

CollectionView 的destroyChildren

CollectionView提供destroyChildren方法将只销毁子视图.这在你想要清空视图但是保留collection中的数据很有用.这个方法接受选择性的checkEmpty参数,默认设为true,如果

设为false它将使得checkEmpty调用无效,而且destroyChildren将不显示emptyView.

myView.destroyChildren(); // will show emptyView
myView.destroyChildren({checkEmpty: false}); // will not show emptyView

　　

回调方法

有若干回调方法提供给CollectionView.如果存在,它们将被view的基本方法调用.这些回调方法在视图定义中直接处理.

 

onBeforeRender回调

onBeforeRender回调在呈现集合视图前被调用.

Marionette.CollectionView.extend({
  onBeforeRender: function(){
    // do stuff here
  }
});

　　

onRender回调

视图呈现后,onRender方法会被调用.你可以在你的视图中自己实现这个回调函数来处理呈现之后视图的el

Marionette.CollectionView.extend({
  onRender: function(){
    // do stuff here
  }
});

　　

onBeforeReorder回调

如果reorderOnSort设为true,onBeforeReorder将在重新排序集合视图前被调用.

Marionette.CollectionView.extend({
  onBeforeReorder: function(){
    // do stuff here
  }
});

　　

onReorder 回调

如果reorderOnSort设为true,视图重新排序后,onReorder方法被调用.

Marionette.CollectionView.extend({
  onReorder: function(){
    // do stuff here
  }
});

　　

onBeforeDestroy回调

销毁视图前此方法被调用.

Marionette.CollectionView.extend({
  onBeforeDestroy: function(){
    // do stuff here
  }
});

　

onDestroy回调

此方法在销毁视图后被调用.

Marionette.CollectionView.extend({
  onDestroy: function(){
    // do stuff here
  }
});

　　

onBeforeAddChild回调

这个回调函数让你可以知道何时child/child 视图实例将要添加到集合视图上.它提供了获得新添加的子视图实例的途径.

Marionette.CollectionView.extend({
  onBeforeAddChild: function(childView){
    // work with the childView instance, here
  }
});

　　

onAddChild回调

这个回调函数允许你知道何时child/child视图实例已经被添加到集合视图上.它提供了获得新添加的子视图实例的途径.

Marionette.CollectionView.extend({
  onAddChild: function(childView){
    // work with the childView instance, here
  }
});

　　

 onBeforeRemoveChild回调

这个回调函数让你可以知道何时子视图实例将要从集合视图移除.提供获得将移除子视图实例的途径.　

Marionette.CollectionView.extend({
  onBeforeRemoveChild: function(childView){
    // work with the childView instance, here
  }
});

　　

onRemoveChild回调

这个回调函数让你可以知道何时子视图实例已经从集合视图中删除或移除.

Marionette.CollectionView.extend({
  onRemoveChild: function(childView){
    // work with the childView instance, here
  }
});

　　

CollectionView事件

在集合视图的整个生命周期中有若干事件被触发.每个事件通过Marionette.triggerMethod函数调用,此函数在视图实例上调用相应的'on{EventName}方法.

"before:render"事件

在视图呈现前被调用.也可以作为'before:render:children"/onBeforeRenderChildren触发.

var MyView = Marionette.CollectionView.extend({...});

var myView = new MyView();

myView.on("before:render", function(){
  alert("the collection view is about to be rendered");
});

myView.render();

　　

"render"事件

"render:children"/onRenderChildren事件也被触发.这让你可以在视图呈现后添加多个执行的回调,也让父视图和应用的其它部分知道这个视图已经呈现.

var MyView = Marionette.CollectionView.extend({...});

var myView = new MyView();

myView.on("render", function(){
  alert("the collection view was rendered!");
});

myView.on("render:children", function(){
  alert("the collection view was rendered!");
});

myView.render();

　　

"before:apply:filter/"apply:filter"事件

当setFilter修改filter属性,这些事件在过滤子视图们前/后相应触发.

var MyView = Marionette.CollectionView.extend({...});

var myView = new MyView();
myView.render();

var myFilter = function(child) {
  return child.get('foo') % 2 === 0;
};

myView.on("before:apply:filter", function(){
  alert("the collection view is about to be filtered");
});

myView.on("apply:filter", function(){
  alert("the collection view has been filtered following its filter attribute");
});

myView.setFilter(myFilter);

　　

"before:reorder"/"reorder"事件

当reorderOnSort设为true时,这些事件在集合视图的重新排序前/后相应触发.

var MyView = Marionette.CollectionView.extend({...});

var myCol = new Backbone.Collection({ comparator: ... })
var myView = new MyView({ reorderOnSort: true });
myView.render();
myCol.comparator = function () { return this.get('foo'); };

myView.on("before:reorder", function(){
  alert("the collection view is about to be reordered");
});

myView.on("reorder", function(){
  alert("the collection view has been reordered following its collection");
});

myCol.sort()

　　

"before:destroy"事件

当销毁视图时触发."before:destroy:children"/onBeforeDestroyChildren事件触发.

var MyView = Marionette.CollectionView.extend({...});

var myView = new MyView();

myView.on("before:destroy:childen", function(){
  alert("the collection view is about to be destroyed");
});

myView.destroy();

　　

"destroy"/"destroy:children"事件

当销毁视图后触发.

var MyView = Marionette.CollectionView.extend({...});

var myView = new MyView();

myView.on("destroy:childen", function(){
  alert("the collection view is now destroyed");
});

myView.destroy();

　　

"before:add:child"/"add:child"事件

'before:add:child"事件和对应的onBeforeAddChild方法在创建的子视图实例添加到集合后触发,但是发生在视图呈现和添加到DOM中前.

"add:child"事件和对应的onAddChild方法在呈现视图和添加到视图的DOM元素上后触发.

var MyCV = Marionette.CollectionView.extend({
  // ...

  onBeforeAddChild: function(){
    // ...
  },

  onAddChild: function(){
    // ...
  }
});

var cv = new MyCV({...});

cv.on("before:add:child", function(viewInstance){
  // ...
});

cv.on("add:child", function(viewInstance){
  // ...
});

　　

"before:remove:child"

在子视图实例已经从集合视图中移除,但是在它销毁前触发.

cv.on("before:remove:child", function(childView){
  // ...
});

　　

"remove:child"事件

当子视图实例已经销毁移除后触发,当它的child从集合上删除.

cv.on("remove:child", function(viewInstance){
  // ...
});

　　

从子视图冒泡得到的"childview:*"事件

当集合视图中的子视图触发事件,事件会使用"childview:"加在事件名称前冒泡到父集合视图.

就是说,如果子视图触发"do:something",父集合视图会触发"children:do:something"

现在,当子视图的button点击时,将弹出框说明"I said',do Something!'

// set up basic collection
var myModel = new MyModel();
var myCollection = new MyCollection();
myCollection.add(myModel);

var MyView = Marionette.View.extend({
  triggers: {
    'click button': 'do:something'
  }
});

// get the collection view in place
var colView = new CollectionView({
  collection: myCollection,
  childView: MyView,
  onChildviewDoSomething: function() {
    alert("I said, 'do something!'");
  }
});
colView.render();

　　

也可以手动的view.on('childView:do:something')来添加事件.

before:render:children"/onBeforeRenderChildren 事件

before:render:children事件在集合视图的子视图已经呈现和缓存前触发.它和集合视图的before:render事件不同,它仅仅在集合非空时才触发.

render:children事件

render:children事件在CollectionView的子视图都已经呈现和缓存后触发.它和CollectionView的render事件不同,它仅仅在集合非空时才触发.

before:render:empty事件

before:render:empty事件在创建新的emptyView但是后触发,但是发生在视图呈现和添加到ＤＯＭ上前．

var myEmptyView = Marionette.View.extend({
  template: false
});

var MyCollectionView = Marionette.CollectionView.extend({
  emptyView: myEmptyView
});

var myCollectionView = new MyCollectionView();

myCollectionView.on("before:render:empty", function(){
  alert("the empty view is now created");
});

myCollectionView.render()

　　

"render:empty"事件

"render:empty"事件发生在呈现emptyView和添加到视图的DOM元素上触发.

var myEmptyView = Marionette.View.extend({
  template: false
});

var MyCollectionView = Marionette.CollectionView.extend({
  emptyView: myEmptyView
});

var myCollectionView = new MyCollectionView();

myCollectionView.on("render:empty", function(){
  alert("the empty view has been rendered");
});

myCollectionView.render()

　　

"before:remove:empty"事件

当emptyView实例移除后但是销毁前触发.

var collection = new Backbone.Collection();

var myEmptyView = Marionette.View.extend({
  template: false
});

var myChildView = Marionette.View.extend({
  template: false
});

var MyCollectionView = Marionette.CollectionView.extend({
  childView: myChildView,
  collection: collection,
  emptyView: myEmptyView
});

var myCollectionView = new MyCollectionView();

myCollectionView.on("before:remove:empty", function(){
  alert("the empty view is now removed");
});

myCollectionView.render()

collection.add([{foo: 'bar'}]);

　　

"remove:empty"事件

当从ＤＯＭ上销毁emptyView后触发.

CollectionView 子视图事件

下面事件由子视图在呈现和销毁期间发生的事件,和视图在Region#show'生命周期内的那部分同步.

before:render/onBeforeRender-在视图呈现前调用.

render/onRender-在视图呈现后调用,但是发生在添加到DOM上前.

before:show/onBeforeShow-在视图已经呈现,但是在绑定到CollectionView上之前发生.

before:attach/onBeforeAttach-发生在视图添加到DOM上前.如果CollectionView自己没有被添加到ＤＯＭ上这个事件不会发生．

show/onShow-视图已经呈现,并且绑定到CollectionView上时发生.

dom:refresh/onDomRefresh-当视图呈现和显示后发生,但是仅仅在它添加到ＤＯＭ上.这在CollectionView自己没有添加到DOM上不会发生.

before:destroy/onBeforeDestroy-在销毁视图前发生.

destroy/onDestroy-在销毁视图后发生.

注意:render,destroy,dom:refresh在视图呈现期间在原生的Backbone视图上发生,但是这些事件的完整实现时Backbone 视图应该在render()中触发render,remove()中触发destroy,同时设置下面的标志:

view.supportsRenderLifecycle = true;
view.supportsDestroyLifecycle = true;

　　

CollectionView render

集合视图的render方法负责呈现整个集合.它循环集合中的每个子元素使用子视图单独呈现.

var MyCollectionView = Marionette.CollectionView.extend({...});

// all of the children views will now be rendered.
new MyCollectionView().render();

　　

CollectionView:自动Rendering

在首次呈现后集合视图绑定到自己的集合的'add','remove'和'reset'事件上.

当视图的集合'reset'时,集合视图将调用自己的render方法来重新呈现整个集合.

当集合中新增一个model时,集合视图将呈现那个模型的视图,并且添加到子视图集合中.

当模型从集合上删除时,集合视图将销毁和移除这个模型的子视图.

当视图的集合排序时,集合视图自动重新排序子视图.

如果reorderOnSort被设置,它将尝试在不重新整个DOM呈现而重新排序DOM,否则它将在顺序改变时自动重新呈现整个DOM.注意如果你在集合视图上应用filter时,排序期间过滤的视图将总是重新呈现.

var collection = new Backbone.Collection();

var myChildView = Marionette.View.extend({
  template: false
});

var MyCollectionView = Marionette.CollectionView.extend({
  childView: myChildView,
  collection: collection,
});

var myCollectionView = new MyCollectionView();

// Collection view will not re-render as it has not been rendered
collection.reset([{foo: 'foo'}]);

myCollectionView.render();

// Collection view will re-render displaying the new model
collection.reset([{foo: 'bar'}]);

　　

CollectionView:Re-render 集合

如果你需要重新呈现整个集合,你可以调用view.render方法.这个方法负责销毁先前的所有子视图.

CollectionView的attachHtml

默认CollectionView将把每一个子视图的HTML追加到元素缓存中,然后调用jQuery的.append方法一次将HTML移动到集合视图的el中.

你可以在视图定义中通过指定attachHtml方法来重载.这个方法接受三个参数,没有返回值.

Marionette.CollectionView.extend({

    // The default implementation:
  attachHtml: function(collectionView, childView, index){
    if (collectionView.isBuffering) {
      // buffering happens on reset events and initial renders
      // in order to reduce the number of inserts into the
      // document, which are expensive.
      collectionView._bufferedChildren.splice(index, 0, childView);
    }
    else {
      // If we've already rendered the main collection, append
      // the new child into the correct order if we need to. Otherwise
      // append to the end.
      if (!collectionView._insertBefore(childView, index)){
        collectionView._insertAfter(childView);
      }
    }
  },

  // Called after all children have been appended into the elBuffer
  attachBuffer: function(collectionView, buffer) {
    collectionView.$el.append(buffer);
  },

  // called on initialize and after attachBuffer is called
  initRenderBuffer: function() {
    this.elBuffer = document.createDocumentFragment();
  }

});

　　

第一个参数为CollectionView实例,它将接收第二个参数--当前子视图实例的HTML,第三个参数,index,是子视图实例代表的模型在模型集合中的索引.这对于排序集合和以正确顺序展示排序后的列表很有用.

不考虑元素缓存的重载attachHtml将工作正常,但是不会利用缓存提供的60x性能提高.

 CollectionView的resortView

默认情况下CollectionView将在DOM中维持Collection的顺序然而当有些情况下视图需要重新呈现来使得这发生,例如你改变集合的比较符.默认CollectionView将调用render,但是也有不适合的情况.比如当在CompositeView中排序children时,你只想要呈现内部集合.

var cv = new Marionette.CollectionView({
  collection: someCollection,
  resortView: function() {
    // provide custom logic for rendering after sorting the collection
  }
});

　　

CollectionView的viewComparator

如果你想要CollectionView的children使用不同的排序方法而不是Backbone 集合默认使用的排序方法,CollectionView可以使用自定义viewComparator选项.

  var cv = new Marionette.CollectionView({
    collection: someCollection,
    viewComparator: 'otherFieldToSortOn'
  });

　　

viewComparator可以接受任意的Backbone.Collection比较符格式--sortBy(接受一个单参数的函数),sort(接受两个参数的比较函数),或者用于排序的属性的字符串名称.

CollectionView filter

如果你想要阻止collection的某些模型呈现为子视图,CollectionView可以使用自定义的filter选项.

filter函数接受集合中的模型作为参数,返回是否此模型应该呈现的Boolean值.

 var cv = new Marionette.CollectionView({
    childView: SomeChildView,
    emptyView: SomeEmptyView,
    collection: new Backbone.Collection([
      { value: 1 },
      { value: 2 },
      { value: 3 },
      { value: 4 }
    ]),

    // Only show views with even values
    filter: function (child, index, collection) {
      return child.get('value') % 2 === 0;
    }
  });

  // renders the views with values '2' and '4'
  cv.render();

  // change the filter
  cv.filter = function (child, index, collection) {
    return child.get('value') % 2 !== 0;
  };

  // renders the views with values '1' and '3'
  cv.render();

  // remove the filter
  // note that using `delete cv.filter` will cause the prototype's filter to be used
  // which may be undesirable
  cv.filter = null;

  // renders all views
  cv.render();

　　

CollectionView的children

CollectionView使用Backbone.BabySitter来存储管理它的子视图.这让你容易的在集合视图中获取子视图,而且迭代它们,或者通过索引找到,就像视图的model或collection那样.

var cv = new Marionette.CollectionView({
  collection: someCollection
});

cv.render();


// retrieve a view by model
var v = cv.children.findByModel(someModel);

// iterate over all of the views and process them
cv.children.each(function(view){

  // process the `view` here

});

　　

关于.children的可用特性和功能,请看Backbone.BabySitter文档.

CollectionView destroy

CollectionView实现destroy方法,被region 管理器自动调用.实现的一部分,下面步骤被执行:

移除所有的listenTo事件

移除所有的自定义视图事件

移除所有的DOM事件

解绑定所有已经呈现的子视图

从ＤＯＭ中移除this.el

如果视图上存在onDestroy事件,调用它

返回CollectionView

通过在视图定义上提供onDestroy事件,你可以为你的视图运行视图销毁和清除后的其它代码.这让你可以处理额外的代码而不必重载destroy方法.

Marionette.CollectionView.extend({
  onDestroy: function() {
    // custom cleanup or destroying code, here
  }
});