Marionette.CollectionView

Блок CollectionView будет перебирать все модели в указанной коллекции, рендерить каждую из них с использованием указанного childView, затем добавлять результат работы дочернего представления к el представления коллекции. По умолчанию CollectionView сохраняет порядок отсортированной коллекции в DOM. Это поведение можно отключить, указав {sort: false} при инициализации.

CollectionView наследуется непосредственно от Marionette.View. Для получения дополнительной информации о доступных функциях и возможностях обратитесь к документации Marionette.View.

Кроме того, взаимодействие с Marionette.Region предоставит такие функции, как onShow обратные вызовы и т.д. Для получения дополнительной информации обратитесь к документации Region.

Индекс документации

• Дочернее представление childView
  • Получение дочернего представления getChildView
  • Опции дочернего представления childViewOptions
  • Префикс событий дочернего представления childViewEventPrefix
  • События дочернего представления childEvents
  • Создание дочернего представления buildChildView
  • Удаление дочернего представления removeChildView
  • Добавление дочернего представления addChild
  • Переупорядочивание при сортировке reorderOnSort
• Представление при пустой коллекции emptyView
  • Получение представления при пустой коллекции getEmptyView
  • Проверка на пустоту коллекции isEmpty
  • Опции представления при пустой коллекции emptyViewOptions
  • Удаление дочерних представлений destroyChildren
• Обратные вызовы
  • Обратный вызов onBeforeRender
  • Обратный вызов onRender
  • Обратный вызов onBeforeReorder
  • Обратный вызов onReorder
  • Обратный вызов onBeforeDestroy
  • Обратный вызов onDestroy
  • Обратный вызов onBeforeAddChild
  • Обратный вызов onAddChild
  • Обратный вызов onBeforeRemoveChild
  • Обратный вызов onRemoveChild
• События CollectionView
  • "before:render" событие
  • "render" событие
  • "before:reorder" / "reorder" событие
  • "before:destroy" событие
  • "destroy" / "destroy:collection" событие
  • "before:add:child" / "add:child" событие
  • "before:remove:child" событие
  • "remove:child" событие
  • Передача событий "childview:*" от дочерних представлений
  • "before:render:collection" событие
  • "render:collection" событие
• События дочерних представлений CollectionView
• Рендеринг CollectionView
• Автоматический рендеринг CollectionView
• Пере-рендеринг коллекции CollectionView
• attachHtml CollectionView
• resortView CollectionView
• viewComparator CollectionView
• Фильтр CollectionView
• children CollectionView
• Уничтожение CollectionView

Дочернее представление CollectionView

Укажите определение childView в вашем представлении коллекции. Это должно быть определение объекта представления Backbone, а не экземпляр. Оно может быть любым Backbone.View или быть производным от Marionette.ItemView.

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

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

Дочерние представления должны быть определены перед использованием атрибута childView в определении представления коллекции. Используйте getChildView для поиска определения, так как дочерние представления создаются.

В качестве альтернативы, вы можете указать childView в опциях конструктора:

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

new MyCollectionView({
  childView: MyChildView
});

Если вы не укажете childView, будет выброшено исключение, указывающее на необходимость указать childView.

Получение дочернего представления CollectionView

Значение, возвращаемое этим методом, — это класс ChildView, который будет создан, когда требуется Model начальное рендеринг. Этот метод также позволяет настраивать каждый Model ChildViews.

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

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

var MyCollectionView = Marionette.CollectionView.extend({
  getChildView: 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({
  collection: new Backbone.Collection()
});
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

Возможны ситуации, когда необходимо передавать данные из родительского представления коллекции в каждый экземпляр childView. Для этого предоставьте определение childViewOptions в вашем представлении коллекции как литерал объекта. Это будет передано в конструктор вашего childView как часть options.

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

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

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

Вы также можете указать childViewOptions как функцию, если вам нужно вычислить значения во время выполнения. Модель будет передана в функцию, если вам необходимо получить к ней доступ при вычислении childViewOptions. Функция должна возвращать объект, а атрибуты объекта будут скопированы в опции экземпляра childView.

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

Хэш childEvents или метод позволяет обрабатывать события дочерних представлений без ручного задания привязок. Значения хэша могут быть либо функцией, либо именем метода в представлении коллекции.

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

  childEvents: {
    // 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({

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

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

childEvents также перехватывает пользовательские события, генерируемые дочерним представлением. Обратите внимание, что первым аргументом обработчика childEvents является само дочернее представление.

// The child view fires a custom event, `show:message`
var ChildView = Marionette.ItemView.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 childEvents to catch the child view's custom event
var ParentView = Marionette.CollectionView.extend({

  childView: ChildView,

  childEvents: {
    '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

Когда требуется создание пользовательского экземпляра представления для 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

Удалите определенный экземпляр представления и уничтожьте его. Эта функция также обновляет индексы последующих представлений в коллекции, чтобы синхронизировать дочерние элементы с коллекцией.

// add some views to a CollectionView
var myCollectionView = new MyCollectionView({
  collection: new Backbone.Collection([fooModel, barModel]);
});

myCollectionView.render();

var myView = myCollectionView.children.findByModel(foo);

// remove a child view myView
myCollectionView.removeChildView(myView);

// check if the removed view still exist
console.log(myCollectionView.children.findByModel(fooModel)); // return undefined
console.log(myCollectionView.children.findByModel(barModel)); // return a childView bar

Добавление дочернего представления CollectionView

Метод addChild отвечает за рендеринг childViews и добавление их в HTML для экземпляра collectionView. Он также отвечает за срабатывание событий по ChildView. В большинстве случаев вам не следует переопределять этот метод. Однако, если вы хотите прервать этот метод, это можно сделать следующим образом.

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

Переупорядочивание при сортировке CollectionView

Эта опция полезна, когда у вас возникают проблемы с производительностью при сортировке вашей CollectionView. Без этой опции ваше CollectionView будет полностью перерендерировано, что может быть дорогостоящим, если у вас много элементов или если ваши ChildView сложные. Если эта опция включена, при сортировке Collection перерендеринг не будет выполняться, будут переупорядочены только узлы DOM. Это может быть проблемой, если ваши ChildView используют индекс коллекции в своём рендеринге. В этом случае вы не можете использовать эту опцию, так как вам нужно перерендерить каждое ChildView.

Если вы сочетаете эту опцию с фильтром filter, который изменяет отображаемые представления, reorderOnSort будет пропущен, чтобы рендерить новые дочерние элементы и удалять те, которые отклоняются фильтром.

Представление при пустой коллекции CollectionView

Когда коллекция не содержит дочерних элементов, и вам нужно отобразить представление, отличное от списка childViews, вы можете указать атрибут emptyView в вашем представлении коллекции.

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

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

  emptyView: NoChildrenView
});

Получение представления при пустой коллекции CollectionView

Если вам нужно выбрать класс emptyView динамически, укажите getEmptyView:

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

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

Проверка на пустоту коллекции CollectionView

Если вы хотите контролировать, когда рендерится представление пустой коллекции, вы можете переопределить isEmpty:

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

Опции представления при пустой коллекции CollectionView

Аналогично childView и childViewOptions, существует свойство emptyViewOptions, которое будет передано в конструктор emptyView. Оно может быть предоставлено как литерал объекта или как функция.

Если emptyViewOptions не предоставлены, CollectionView по умолчанию передаст childViewOptions в конструктор emptyView.

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

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

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

Удаление дочерних представлений CollectionView

CollectionView предоставляет метод destroyChildren, который уничтожит только свои childViews. Это может быть полезно, когда вы хотите очистить представление, но сохранить данные в collection. Этот метод принимает необязательный параметр checkEmpty, по умолчанию он равен true. Если false, вы отключите вызов checkEmpty, и destroyChildren не будет отображать emptyView.

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

Обратные вызовы

Существует несколько обратных вызовов, которые могут быть предоставлены для CollectionView. Если они найдены, они будут вызваны базовыми методами представления. Эти обратные вызовы предназначены для обработки непосредственно в определении представления.

Обратный вызов 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

Эта функция обратного вызова позволяет узнать, когда экземпляр дочернего элемента/дочернего представления собирается добавляться в представление коллекции. Она предоставляет доступ к экземпляру представления для дочернего элемента, который был добавлен.

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

Обработчик onAddChild

Эта функция обратного вызова позволяет узнать, когда экземпляр дочернего элемента/дочернего представления был добавлен в представление коллекции. Она предоставляет доступ к экземпляру представления для дочернего элемента, который был добавлен.

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

Обработчик onBeforeRemoveChild

Эта функция обратного вызова позволяет узнать, когда экземпляр childView собирается быть удалён из collectionView. Она предоставляет доступ к экземпляру представления для удалённого дочернего элемента.

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:collection" / onBeforeRenderCollection.

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:collection" / onRenderCollection. Это позволяет добавить несколько обратных вызовов, которые будут выполнены после отображения представления, а также позволяет родительским представлениям и другим частям приложения знать, что представление было отображено.

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

var myView = new MyView();

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

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

myView.render();

События "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:collection" / onBeforeDestroyCollection.

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

var myView = new MyView();

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

myView.destroy();

События "destroy" / "destroy:collection"

Срабатывает непосредственно после уничтожения представления, оба с соответствующими вызовами методов.

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

var myView = new MyView();

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

myView.destroy();

Событие "before:add:child" / "add:child"

Событие "before:add:child" и соответствующий метод onBeforeAddChild вызываются сразу после создания нового экземпляра childView для дочернего элемента, который был добавлен в коллекцию, но до отображения представления и добавления его в 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"

Это событие срабатывает после удаления экземпляра childView из коллекции, но перед его уничтожением.

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

Событие "remove:child"

Срабатывает после уничтожения и удаления экземпляра childView, когда его дочерний элемент был удалён или удалён из коллекции.

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

События "childview:*" всплывающие из дочерних представлений

Когда дочернее представление в представлении коллекции вызывает событие, это событие будет всплывать через родительское представление коллекции с "childview:" в начале имени события.

То есть, если дочернее представление вызывает "do:something", родительская коллекция представлений затем вызовет "childview:do:something".

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

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

// get the collection view in place
var colView = new CollectionView({
  collection: myCollection,
  childView: MyItemView,

  onChildviewDoSomething: function() {
    alert("I said, 'do something!'");
  }
});
colView.render();

Теперь, всякий раз, когда кнопка внутри прикреплённого дочернего представления нажимается, появится окно с надписью: Я сказал "сделать что-то!".

Также можно вручную прикрепить событие, используя обычные view.on('childview:do:something').

Событие before:render:collection

Событие before:render:collection срабатывает перед тем, как дочерние элементы collectionView были отображены и буферизированы. Оно отличается от collectionsView before:render тем, что генерируется только если collection не пуста.

Событие render:collection

Событие render:collection срабатывает после того, как дочерние элементы collectionView были отображены и буферизированы. Оно отличается от collectionViews render тем, что происходит только если collection не пуста.

События представления дочерних элементов CollectionView

Следующие события поднимаются на дочерние представления во время отображения и уничтожения дочерних представлений, что согласуется с жизненным циклом представления во время Region#show.

• before:render / onBeforeRender - Вызывается перед отображением представления.
• render / onRender - Вызывается после отображения представления, но до его привязки к DOM.
• before:show / onBeforeShow - Вызывается после отображения представления, но перед его привязкой к CollectionView.
• before:attach / onBeforeAttach - Вызывается перед привязкой представления к DOM. Это не будет выполнено, если CollectionView само не прикреплено.
• attach / onAttach - Вызывается после привязки представления к DOM. Это не будет выполнено, если CollectionView само не прикреплено.
• show / onShow - Вызывается, когда представление отображено и привязано к CollectionView.
• dom:refresh / onDomRefresh - Вызывается, когда представление отображено и показано, но только если оно прикреплено к DOM. Это не будет выполнено, если CollectionView само не прикреплено.
• before:destroy / onBeforeDestroy - Вызывается перед уничтожением представления.
• destroy / onDestroy - Вызывается после уничтожения представления.

Примечание: render, destroy, и dom:refresh вызываются для чистых представлений Backbone во время отображения дочерних представлений, но для полной реализации этих событий представление Backbone должно вызывать render в render() и destroy в remove(), а также устанавливать следующие флаги:

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

Отображение CollectionView

Метод render представления коллекции отвечает за отображение всей коллекции. Он перебирает каждый элемент в коллекции и отображает их по отдельности как childView.

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

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

CollectionView: Автоматическое отображение

После начального отображения представление коллекции связывается с событиями "add", "remove" и "reset" коллекции, которая указана.

Когда коллекция для представления "reset", представление вызовет render на себе и повторно отобразит всю коллекцию.

Когда модель добавляется в коллекцию, представление коллекции отобразит эту модель в коллекцию дочерних представлений.

Когда модель удаляется из коллекции (или уничтожается/удаляется), представление коллекции уничтожит и удалит дочернее представление этой модели.

Когда коллекция для представления сортируется, представление автоматически отсортирует свои дочерние представления. Если опция reorderOnSort установлена, оно попытается переупорядочить DOM и сделать это без полного переотрисовки, в противном случае оно переотрисуется, если порядок изменился. Обратите внимание, что если вы применяете фильтр к представлению коллекции, а отфильтрованные представления изменяются во время сортировки, то оно всегда будет перерисовываться.

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: Повторное отображение коллекции

Если вам нужно перерисовать всю коллекцию, вы можете вызвать метод view.render. Этот метод позаботится об уничтожении всех ранее открытых дочерних представлений.

Прикрепление HTML к CollectionView

По умолчанию представление коллекции будет добавлять HTML каждого ChildView в буфер элемента, а затем вызовет jQuery's .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();
  }

});

Первый параметр — экземпляр представления коллекции, который получит HTML из второго параметра, текущего экземпляра представления дочернего элемента.

Третий параметр, index, — индекс модели, которую представляет этот экземпляр childView в коллекции, из которой модель была взята. Это полезно для сортировки коллекции и отображения отсортированного списка в правильном порядке на экране.

Переопределения attachHtml , которые не учитывают буфер элементов, будут работать нормально, но не будут использовать увеличение производительности на 60 раз, которое предоставляет буфер.

Переупорядочивание представления CollectionView

По умолчанию CollectionView сохраняет порядок своих collection в DOM. Однако в некоторых случаях представление может потребоваться перерисовать, чтобы это стало возможным, например, если вы измените компаратор в коллекции. По умолчанию CollectionView вызовет render в этом случае, но есть случаи, когда это может быть не подходящим. Например, при сортировке children в CompositeView, вы хотите отображать только внутреннюю коллекцию.

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

Компаратор представлений CollectionView

CollectionView позволяет использовать пользовательскую опцию viewComparator, если вы хотите, чтобы дочерние элементы CollectionView отображались в другом порядке сортировки, нежели использует базовая коллекция Backbone.

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

viewComparator может принимать любой из допустимых форматов компараторов Backbone.Collection форматов компаратора — sortBy (передайте функцию, принимающую один аргумент), как sort (передайте функцию компаратора, ожидающую два аргумента) или как строка, указывающая атрибут для сортировки.

Фильтр CollectionView

CollectionView позволяет использовать настраиваемый filter параметр, если вы хотите предотвратить отображение некоторых моделей базовых collection в качестве дочерних представлений. Функция фильтрации принимает модель из коллекции и возвращает истинное значение, если дочернее представление должно быть отображено, и ложное значение, если оно не должно отображаться.

  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

CollectionView использует Backbone.BabySitter для хранения и управления своими дочерними представлениями. Это позволяет легко получить доступ к представлениям в представлении коллекции, итерировать их, находить их по заданному индексу, такому как модель представления или коллекция, и многое другое.

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

CollectionView реализует метод destroy, который вызывается менеджерами областей автоматически. В рамках реализации выполняются следующие действия:

• отключение всех listenTo событий
• отключение всех пользовательских событий представления
• отключение всех событий DOM
• отключение всех дочерних представлений, которые были отображены
• удаление this.el из DOM
• вызов события onDestroy в представлении, если оно предоставлено
• возвращается CollectionView

Предоставление события onDestroy в определении вашего представления позволяет выполнить пользовательский код для вашего представления, который запускается после того, как ваше представление было удалено и очищено. Это позволяет обрабатывать любой дополнительный код очистки без необходимости переопределения метода destroy.

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