Marionette.CollectionView

A CollectionView подобный View управляет частью DOM через единственный родительский элемент DOM или el. Этот вид управляет упорядоченным набором дочерних представлений, которые отображаются внутри el представления. Эти дочерние элементы чаще всего создаются для соответствия моделям Backbone.Collection, хотя CollectionView не требует collection и может управлять любым набором представлений.

CollectionView включает:

• API DOM
• События класса
• Взаимодействия с DOM
• Передача событий дочерними элементами
• События сущностей
• Отображение представления
• Предварительно отрисованное содержимое
• Жизненный цикл представления

У CollectionView могут быть Behavior.

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

• Создание экземпляра CollectionView
• Отображение CollectionView
  • Отображение шаблона
  • Определение childViewContainer
  • Повторное отображение CollectionView
• Жизненный цикл и события представления
• События сущностей
• Взаимодействия с DOM
• Поведения
• Управление дочерними элементами
  • Прикрепление children в el
  • Удаление всех children
• childView CollectionView
  • Создание children
  • Передача данных дочернему childView
• emptyView CollectionView
  • getEmptyRegion CollectionView
  • Передача данных пустому emptyView
  • Определение, когда отображается emptyView
• Доступ к дочернему представлению
  • children CollectionView Итераторы и функции коллекций
• Прослушивание событий на children
• Самоуправляемые children
  • Добавление дочернего представления
  • Удаление дочернего представления
  • Отсоединение дочернего представления
  • Обмен дочерними представлениями
• Сортировка children
  • Определение viewComparator
  • Поддержание сортировки collection
• Фильтрация children
  • Определение viewFilter

Создание экземпляра 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

import { CollectionView } from 'backbone.marionette';

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

Некоторые из этих свойств происходят из Marionette, но многие унаследованы от Backbone.View.

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

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

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({...});

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

Отображение шаблона

Помимо отображения дочерних элементов, CollectionView может иметь template. Дочерние представления могут отображаться внутри элемента DOM этого шаблона. CollectionView будет сериализовать model или collection вместе с контекстом для отображения template.

Для получения более подробной информации об отображении шаблонов см. Отображение шаблонов представления.

Определение childViewContainer

По умолчанию CollectionView отобразит дочерние элементы в el CollectionView. Если вы отображаете шаблон, вы захотите установить childViewContainer в качестве селектора элемента внутри шаблона для прикрепления дочерних представлений.

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  childViewContainer: '.js-widgets',
  template: _.template('<h1>Widgets</h1><ul class="js-widgets"></ul>')
});

Ошибки Ошибка будет выброшена, если childViewContainer не найден.

Повторное отображение CollectionView

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

Жизненный цикл и события представления

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

Подробнее:

• Жизненный цикл представления
• События изменения DOM представления
• События уничтожения представления

События сущностей

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

Подробнее:

• События сущностей

Взаимодействия с DOM

В дополнение к тому, что предоставляет Backbone, в Marionette есть дополнительный API для взаимодействия с DOM: events, triggers, и ui.

По умолчанию ui привязан только к элементам внутри шаблона. Однако, поскольку events и triggers делегируются el представления, они будут применяться ко всем дочерним элементам. В некоторых случаях привязка ui может быть полезной, когда вы хотите получить доступ к элементам внутри CollectionView дочерних элементов с помощью getUI(). В таких случаях вам нужно будет привязать ui самостоятельно. Для этого выполните bindUIElements на CollectionView:

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  // ...

  ui: {
    checkbox: 'input[type="checkbox"]'
  }
});

const collectionView = new MyCollectionView();

collectionView.bindUIElements();

console.log(collectionView.getUI('checkbox')); // Output all checkboxes.

Подробнее:

• Взаимодействия с DOM

Поведения

Behavior обеспечивает чистое разделение обязанностей для вашей логики представления, позволяя вам совместно использовать общие операции с пользователем между вашими представлениями.

Подробнее:

• Использование Behavior

Управление дочерними элементами

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

После первоначального отображения render CollectionView привязывается к update и reset событиям collection.

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

Когда в collection добавляется модель, CollectionView отобразит эту модель в children.

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

Когда collection представления отсортирована, представление по умолчанию автоматически сортирует свои дочерние представления, если атрибут sortWithCollection в CollectionView не установлен в значение false, или viewComparator не false.

import Backbone from 'backbone';
import { View, CollectionView } from 'backbone.marionette';

const collection = new Backbone.Collection();

const MyChildView = View.extend({:
  template: false
});

const MyCollectionView = CollectionView.extend({
  childView: MyChildView,
  collection,
});

const myCollectionView = new MyCollectionView();

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

myCollectionView.render();

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

При отображении дочерних элементов будут срабатывать события render:children и before:render:children.

При добавлении дочернего представления в дочерние элементы будут срабатывать события add:child и before:add:child.

При удалении дочернего представления из дочерних элементов будут срабатывать события remove:child и before:remove:child.

Прикрепление children в el

По умолчанию CollectionView добавит HTML каждого ChildView в массив буфера элементов и затем вызовет appendContents API DOM appendContents один раз в конце, чтобы переместить весь HTML в el представления коллекции.

Вы можете переопределить это, указав метод attachHtml в определении вашего представления. Этот метод принимает два параметра и не возвращает значение.

import { CollectionView } from 'backbone.marionette';

CollectionView.extend({

  // The default implementation:
  attachHtml(els, $container){
    // Unless childViewContainer, $container === this.$el
    this.Dom.appendContents(this.el, els);
  }
});

Первый параметр - это буфер HTML, а второй параметр - ожидаемый контейнер для дочерних элементов, который по умолчанию соответствует el представления, если не задан childViewContainer.

Удаление всех children

CollectionView реализует метод destroy, который автоматически уничтожает свои дочерние элементы и очищает слушателей.

При уничтожении дочерних элементов будут срабатывать события destroy:children и before:destroy:children.

Подробнее:

• События уничтожения представления

childView CollectionView

При использовании collection для управления дочерними элементами CollectionView, укажите childView для вашего CollectionView. Это должно быть определение класса представления Backbone, а не экземпляр. Это может быть любой класс, относящийся к Backbone.View, включая классы Marionette View и CollectionView.

import { View, CollectionView } from 'backbone.marionette';

const MyChildView = View.extend({});

const MyCollectionView = CollectionView.extend({
  childView: MyChildView
});

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

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

import _ from 'underscore';
import Backbone from 'backbone';
import { View, CollectionView } from 'backbone.marionette';

const FooView =View.extend({
  template: _.template('foo')
});

const BarView = View.extend({
  bar
});

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

const collectionView = new MyCollectionView();

const foo = new Backbone.Model({
  isFoo: true
});

const bar = new Backbone.Model({
  isFoo: false
});

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

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

Ошибки Если childView является функцией, которая не возвращает класс представления, будет выброшено исключение.

Создание children

Метод buildChildView отвечает за взятие класса ChildView и создание его экземпляра с соответствующими данными. Этот метод принимает три параметра и возвращает экземпляр представления, который будет использоваться в качестве дочернего представления.

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

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

import _ from 'underscore';
import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';
import MyListView from './my-list-view';
import MyView from './my-view';

const MyCollectionView = CollectionView.extend({
  childView(child) {
    if (child.get('type') === 'list') {
      return MyListView;
    }

    return MyView;
  },
  buildChildView(child, ChildViewClass, childViewOptions) {
    const options = {};

    if (child.get('type') === 'list') {
      const childList = new Backbone.Collection(child.get('list'));
      options = _.extend({collection: childList}, childViewOptions);
    } else {
      options = _.extend({model: child}, childViewOptions);
    }

    // create the child view instance
    const view = new ChildViewClass(options);
    // return it
    return view;
  }
});

Передача данных дочернему представлению childView

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

import { View, CollectionView } from 'backbone.marionette';

const ChildView = View.extend({
  initialize(options) {
    console.log(options.foo); // => "bar"
  }
});

const MyCollectionView = CollectionView.extend({
  childView: ChildView,

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

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

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  childViewOptions(model) {
    // do some calculations based on the model
    return {
      foo: 'bar'
    };
  }
});

Представление emptyView коллекции

Когда у коллекции нет дочерних элементов, и вам нужно отобразить представление, отличное от списка дочерних представлений, вы можете указать атрибут emptyView в представлении вашей коллекции. Представление emptyView, так же как и в childView, может быть передано в качестве параметра при инициализации или быть функцией, возвращающей emptyView.

import _ from 'underscore';
import { View, CollectionView } from 'backbone.marionette';

const MyEmptyView = View.extend({
  template: _.template('Nothing to display.')
});

const MyCollectionView = CollectionView.extend({
  // ...

  emptyView: MyEmptyView
});

Регион getEmptyRegion коллекции

При создании экземпляра CollectionView создаётся область для отображения emptyView. Этот регион можно запросить, используя метод getEmptyRegion. Регион будет совмещать el с CollectionView и отображаться с помощью replaceElement: false.

Примечание Метод CollectionView ожидает быть единственным элементом, управляющим регионом. Не рекомендуется напрямую отображать элементы в этом регионе.

const isEmptyShowing = myCollectionView.getEmptyRegion().hasView();

Этот регион может быть полезен для обработки событий Событий региона пустого представления.

Передача данных пустому представлению emptyView

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

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

import { View, CollectionView } from 'backbone.marionette';

const EmptyView = View.extend({
  initialize(options){
    console.log(options.foo); // => "bar"
  }
});

const MyCollectionView = CollectionView.extend({
  emptyView: EmptyView,

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

Определение, когда отображается пустое представление emptyView

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

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  isEmpty() {
    // some logic to calculate if the view should be rendered as empty
    return this.collection.length < 2;
  }
});

По умолчанию реализация isEmpty возвращает !this.children.length.

Вы также можете использовать этот метод для определения того, когда было отображено пустое представление:

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  // ...
  onRenderChildren() {
    if (this.isEmpty()) { console.log('Empty View Shown'); }
  }
});

Доступ к дочернему представлению

Вы можете получить доступ к представлению несколькими способами. Если метод findBy* не может найти представление, он вернёт undefined.

Примечание, что children представляет представления, которые отображаются или будут отображены внутри области представления el.

CollectionView children's: findByCid

Найти представление по его cid.

const bView = myCollectionView.children.findByCid(buttonView.cid);

CollectionView children's: findByModel

Найти представление по модели.

const bView = myCollectionView.children.findByModel(buttonView.model);

CollectionView children's: findByModelCid

Найти представление по cid модели.

const bView = myCollectionView.children.findByModelCid(buttonView.model.cid);

CollectionView children's: findByIndex

Найти по числовому индексу (нестабильно)

const bView = myCollectionView.children.findByIndex(0);

CollectionView children's: findIndexByView

Найти индекс представления в children

const index = myCollectionView.children.findIndexByView(bView);

Итераторы и функции коллекции CollectionView children

Объект контейнера использует несколько функций из Underscore.js для предоставления итераторов и других функций для работы с коллекциями, включая:

• each
• map
• reduce
• find
• filter
• reject
• every
• some
• contains
• invoke
• toArray
• first
• initial
• rest
• last
• without
• isEmpty
• pluck
• partition

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

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const collectionView = new CollectionView({
  collection: new Backbone.Collection()
});

collectionView.render();

// iterate over all of the views and process them
collectionView.children.each(function(childView) {
  // process the `childView` here
});

Прослушивание событий на дочерних элементах children

CollectionView может принимать действия в зависимости от событий, сгенерированных в его children.

Подробнее:

• Передача событий от дочерних элементов

Самостоятельное управление children

Помимо дочерних элементов, добавленных Marionette, соответствующих модели collection, дочерние элементы children CollectionView можно управлять вручную.

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

Метод addChildView можно использовать для добавления представления, независимого от вашей Backbone.Collection. Этот метод принимает два параметра: экземпляр дочернего представления и, необязательно, индекс, где он должен быть размещён в children. Возвращает добавленное представление.

import { CollectionView } from 'backbone.marionette';
import ButtonView from './button-view';

const MyCollectionView = CollectionView.extend({
  onRender() {
    View = new ButtonView();
    this.addChildView(buttonView, this.children.length);
  }
});

const myCollectionView = new MyCollectionView();

myCollectionView.render();

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

Удаление дочернего представления

Метод removeChildView полезен, если вам нужно удалить и уничтожить представление из CollectionView без влияния на коллекцию представления. В большинстве случаев лучше использовать данные для определения того, что должно отображать CollectionView.

Этот метод принимает экземпляр дочернего представления для удаления в качестве параметра. Он возвращает удалённое представление.

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  onChildViewFooEvent(childView, model) {
    // NOTE: we must wait for the server to confirm
    // the destroy PRIOR to removing it from the collection
    model.destroy({wait: true});

    // but go ahead and remove it visually
    this.removeChildView(childView);
  }
});

Отсоединение дочернего представления

Этот метод аналогичен removeChildView за исключением того, что удалённое представление не уничтожается.

Замена дочерних представлений

Поменяйте местами два представления в CollectionView children и в el. Это может быть полезно, когда сортировка произвольная или неэффективная.

Ошибки Если любое из двух представлений не входит в CollectionView, будет выброшено исключение.

Если одно дочернее представление находится в el а другое нет, будет вызван метод filter.

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';
import MyChildView from './my-child-view';

const collection = new Backbone.Collection([
  { name: 'first' },
  { name: 'middle' },
  { name: 'last' }
]);

const myColView = new CollectionView({
  collection: collection,
  childView: MyChildView
});

myColView.swapChildViews(myColView.children.first(), myColView.children.last());

myColView.children.first().model.get('name'); // "last"
myColView.children.last().model.get('name'); // "first"

Сортировка дочерних элементов children

Метод sort пройдёт по CollectionView children до фильтрации и отсортирует их с помощью viewComparator. По умолчанию, если viewComparator не задано, CollectionView отсортирует представления в порядке моделей в collection. Если задано false, сортировка представлений будет отключена.

Этот метод вызывается во время отрисовки, и события sort и before:sort будут вызваны.

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

Определение viewComparator

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

import { CollectionView } from 'backbone.marionette';

const myCollectionView = new CollectionView({
  collection: someCollection,
  viewComparator: 'otherFieldToSortOn'
});

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const myCollection = new Backbone.Collection([
  { id: 1 },
  { id: 4 },
  { id: 3 },
  { id: 2 }
]);

myCollection.comparator = 'id';

const mySortedColView = new CollectionView({
  //...
  collection: myCollection
});

const myUnsortedColView = new CollectionView({
  //...
  collection: myCollection,
  viewComparator: false
});

mySortedColView.render(); // 1 4 3 2
myUnsortedColView.render(); // 1 4 3 2

myCollection.sort();
// mySortedColView auto-renders 1 2 3 4
// myUnsortedColView has no change

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

getComparator

Переопределите этот метод, чтобы определить, какой viewComparator использовать.

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  sortAsc(model) {
    return -model.get('order');
  },
  sortDesc(model) {
    return model.get('order');
  },
  getComparator() {
    // The collectionView's model
    if (this.model.get('sorted') === 'ASC') {
      return this.sortAsc;
    }

    return this.sortDesc;
  }
});

setComparator

Метод setComparator изменяет атрибут CollectionView viewComparator и снова сортирует. Передача { preventRender: true } в аргументе options предотвратит рендеринг представления.

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

// Note: the setComparator is preventing the automatic re-render
cv.setComparator('orderBy', { preventRender: true });

// Render the children ordered by the orderBy attribute
cv.render();

removeComparator

Эта функция на самом деле является алиасом для setComparator(null, options). Она полезна для удаления сравнителя. removeComparator также принимает preventRender в качестве параметра.

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

cv.setComparator('orderBy');

//Remove the current comparator without rendering again.
cv.removeComparator({ preventRender: true });

Сохранение сортировки collection

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

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const myCollection = new Backbone.Collection([
  { id: 1 },
  { id: 4 },
  { id: 3 },
  { id: 2 }
]);

myCollection.comparator = 'id';

const mySortedColView = new CollectionView({
  //...
  collection: myCollection
});

const myUnsortedColView = new CollectionView({
  //...
  collection: myCollection,
  sortWithCollection: false
});

mySortedColView.render(); // 1 4 3 2
myUnsortedColView.render(); // 1 4 3 2

myCollection.sort();
// mySortedColView auto-renders 1 2 3 4
// myUnsortedColView has no change

Фильтрация children

Метод filter будет перебирать отсортированные CollectionView и проверять их по отношению к viewFilter. Виды, которые пройдут viewFilter, будут отрисованы при необходимости и добавлены в CollectionView, а отфильтрованные виды будут отделены. После фильтрации children будет содержать только виды, которые должны быть добавлены.

Если viewFilter существует, будут вызваны события filter и before:filter.

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

Примечание Это функциональность отображения, используемая для удобной фильтрации созданных дочерних элементов. Все дочерние элементы collection будут созданы один раз, независимо от их статуса фильтрации. Если вы хотите управлять созданием дочерних видов, вы должны отфильтровать сам collection.

Определение viewFilter

CollectionView позволяет настроить параметр viewFilter, если вы хотите предотвратить присоединение некоторых базовых children к DOM. viewFilter может быть функцией, предикатным объектом или строкой.

Ошибки Будет выброшено исключение, если ViewFilter не соответствует одному из этих вариантов.

viewFilter как функция

Функция viewFilter принимает вид из children и возвращает истинное значение, если дочерний элемент должен быть добавлен, и ложное значение, если он не должен.

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

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

  // Only show views with even values
  viewFilter(view, index, children) {
    return view.model.get('value') % 2 === 0;
  }
});

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

viewFilter как предикат-объект

Предикат-объект viewFilter будет фильтровать атрибуты модели вида.

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

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

  // Only show views with value 2
  viewFilter: { value: 2 }
});

// renders the view with values '2'
cv.render();

viewFilter как строка

Строка viewFilter представляет атрибут модели вида и будет фильтровать истинные значения.

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  childView: SomeChildView,
  emptyView: SomeEmptyView,
  collection: new Bb.Collection([
    { value: 0 },
    { value: 1 },
    { value: 2 },
    { value: null },
    { value: 4 }
  ]),

  // Only show views 1,2, and 4
  viewFilter: 'value'
});

// renders the view with values '1', '2', and '4'
cv.render();

getFilter

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

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  summaryFilter(view) {
    return view.model.get('type') === 'summary';
  },
  getFilter() {
    if (this.collection.length > 100) {
      return this.summaryFilter;
    }
    return this.viewFilter;
  }
});

setFilter

Метод setFilter изменяет атрибут CollectionView viewFilter и выполняет фильтрацию. Передача { preventRender: true } в аргументе options предотвратит отображение вида.

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

const newFilter = function(view, index, children) {
  return view.model.get('value') % 2 === 0;
};

// Note: the setFilter is preventing the automatic re-render
cv.setFilter(newFilter, { preventRender: true });

//Render the new state of the ChildViews instead of the whole DOM.
cv.render();

removeFilter

Эта функция является алиасом setFilter(null, options). Она полезна для удаления фильтров. removeFilter также принимает preventRender в качестве опции.

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

cv.setFilter(function(view, index, children) {
  return view.model.get('value') % 2 === 0;
});

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