Marionette.NextCollectionView

Предупреждение API NextCollectionView в настоящее время находится на стадии эксперимента и может быть изменён.

Этот NextCollectionView — возможная замена текущего CollectionView в будущей версии Marionette. Это упрощает логику потока CollectionView, а также стандартизирует части API. В результате получается более производительный CollectionView с более согласованным поведением. Дополнительную информацию см. в нашем блоге о причинах внедрения этой функции.

NextCollectionView будет проходить по всем моделям в указанной коллекции, создавая представление для каждой из них с использованием указанного childView, и добавляя их в children. Затем он отсортирует children по viewComparator и отфильтрует их по viewFilter. el дочерних представлений, которые пройдут фильтрацию, будут отображены и добавлены в el представления коллекции. По умолчанию NextCollectionView сохранит порядок отсортированной коллекции в DOM. Это поведение можно отключить, указав {sortWithCollection: false} при инициализации.

NextCollectionView имеет базовые функции, предоставляемые миксином View.

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

• childView NextCollectionView
  • childViewOptions NextCollectionView
• emptyView NextCollectionView
  • emptyViewOptions NextCollectionView
  • isEmpty NextCollectionView
• render NextCollectionView
  • Автоматическое отображение
  • Перерисовать NextCollectionView
  • attachHtml NextCollectionView
• destroy NextCollectionView
• События
  • Передача событий дочерних элементов
  • События жизненного цикла
• Расширенное использование NextCollectionView
  • Управление дочерними элементами
  • Фильтрация
  • Сортировка

childView NextCollectionView

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

var Mn = require('backbone.marionette');

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

Mn.NextCollectionView.extend({
  childView: MyChildView
});

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

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

var Mn = require('backbone.marionette');

var MyNextCollectionView = Mn.NextCollectionView.extend({...});

new MyNextCollectionView({
  childView: MyChildView
});

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

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

var Bb = require('backbone');
var Mn = require('backbone.marionette');

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

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

var MyNextCollectionView = Mn.NextCollectionView.extend({
  collection: new Bb.Collection(),
  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 MyNextCollectionView();
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);

childViewOptions NextCollectionView

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

var Mn = require('backbone.marionette');

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

var NextCollectionView = Mn.NextCollectionView.extend({
  childView: ChildView,

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

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

var Mn = require('backbone.marionette');

var NextCollectionView = Mn.NextCollectionView.extend({
  childViewOptions: function(model) {
    // do some calculations based on the model
    return {
      foo: 'bar'
    }
  }
});

emptyView NextCollectionView

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

var Mn = require('backbone.marionette');

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

var MyNextCollectionView = Mn.NextCollectionView.extend({
  // ...

  emptyView: MyEmptyView
});

getEmptyRegion NextCollectionView

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

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

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

emptyViewOptions NextCollectionView

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

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

var Mn = require('backbone.marionette');

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

var NextCollectionView = Mn.NextCollectionView({
  emptyView: EmptyView,

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

isEmpty NextCollectionView

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

var Mn = require('backbone.marionette');

var MyNextCollectionView = Mn.NextCollectionView.extend({
  isEmpty: function(allViewsFiltered) {
    // some logic to calculate if the view should be rendered as empty
    return this.collection.length < 2;
  }
});

В нормальном цикле жизни NextCollectionView, isEmpty будет вызываться дважды. Первый раз — при начале отображения, второй — после выполнения viewFilter. Для вызова после фильтрации будет передаваться булево значение, указывающее, были ли отфильтрованы все children NextCollectionView.

render NextCollectionView

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

var Mn = require('backbone.marionette');

var MyNextCollectionView = Mn.NextCollectionView.extend({...});

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

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

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

При «сбросе» коллекции для представления, представление вызовет render на себе и перерисует всю коллекцию.

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

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

При сортировке коллекции представление автоматически отсортирует свои дочерние представления, если атрибут sortWithCollection в NextCollectionView не установлен в значение false.

var Bb = require('backbone');
var Mn = require('backbone.marionette');

var collection = new Bb.Collection();

var MyChildView = Mn.View.extend({
  template: _.noop
});

var MyNextCollectionView = Mn.NextCollectionView.extend({
  childView: MyChildView,
  collection: collection,
});

var myNextCollectionView = new MyNextCollectionView();

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

myNextCollectionView.render();

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

Перерисовать NextCollectionView

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

attachHtml NextCollectionView

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

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

var Mn = require('backbone.marionette');

Mn.NextCollectionView.extend({

  // The default implementation:
  attachHtml: function(els){
    this.Dom.appendContents(this.el, els);
  }

});

Первый параметр — экземпляр NextCollectionView, который получит HTML из второго параметра — буфера HTML.

destroy NextCollectionView

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

var Bb = require('backbone');
var Mn = require('backbone.marionette');

var MyChildView = Mn.View.extend({
  template: _.template('ChildView'),
  onDestroy: function() {
    console.log('I will get destroyed');
  }
})

var myNextCollectionView = new Mn.NextCollectionView({
  childView: MyChildView,
  collection: new Bb.Collection([{ id: 1 }])
});

myNextCollectionView.render();

myNextCollectionView.destroy(); // logs "I will get destroyed"

События

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

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

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

var Mn = require('backbone.marionette');

var Item = Mn.View.extend({
  tagName: 'li',

  triggers: {
    'click a': 'select:item'
  }
});

var Collection = Mn.NextCollectionView.extend({
  tagName: 'ul',

  onChildviewSelectItem: function(childView) {
    console.log('item selected: ' + childView.model.id);
  }
});

Событие получит префикс childview: перед применением логики привязки к магическому методу. Дополнительную информацию см. в документации по событиям дочерних представлений.

События жизненного цикла

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

Расширенное использование NextCollectionView

Для получения расширенной информации о фильтрации, сортировке или управлении NextCollectionView см. Расширенное использование NextCollectionView

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

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

Фильтрация

NextCollectionView позволяет настроить параметр viewFilter, если вы хотите предотвратить отображение некоторых дочерних представлений в NextCollectionView. Дополнительная информация...

Сортировка

По умолчанию NextCollectionView будет сохранять порядок отсортированной коллекции в DOM. Дополнительная информация...