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

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

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

• Дочерние элементы NextCollectionView

  • NextCollectionView's buildChildView
  • NextCollectionView's addChildView
  • NextCollectionView: Получение дочерних представлений
    • Дочерние элементы NextCollectionView: findByCid
    • Дочерние элементы NextCollectionView: findByModel
    • Дочерние элементы NextCollectionView: findByModelCid
    • Дочерние элементы NextCollectionView: findByIndex
    • Дочерние элементы NextCollectionView: findIndexByView
  • NextCollectionView's removeChildView
  • NextCollectionView's detachChildView
  • NextCollectionView's swapChildViews
  • Итераторы и функции коллекций NextCollectionView childView

• NextCollectionView's filter

  • NextCollectionView's viewFilter
  • NextCollectionView's getFilter
  • NextCollectionView's setFilter
  • NextCollectionView's removeFilter

• NextCollectionView's sort

  • NextCollectionView's viewComparator
  • NextCollectionView's getComparator
  • NextCollectionView's setComparator
  • NextCollectionView's removeComparator
  • NextCollectionView's sortWithCollection

• Связывание ui

Дочерние элементы NextCollectionView

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

NextCollectionView's buildChildView

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

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;
},

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

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

var MyNextCollectionView = Mn.NextCollectionView.extend({
  childView: function(child) {
    if (child.get('type') === 'list') {
      return MyListView;
    }

    return MyView;
  },
  buildChildView: function(child, ChildViewClass, childViewOptions) {
    var options = {};

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

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

});

NextCollectionView's addChildView

Метод addChildView может использоваться для добавления представления, независимого от вашей Backbone.Collection. Обратите внимание, что это добавленное представление будет подлежать фильтрации и упорядочиванию, и может быть сложно управлять в сложных ситуациях. Используйте с осторожностью.

Этот метод принимает два параметра: экземпляр дочернего представления и индекс, куда он должен быть помещён в дочерние элементы NextCollectionView. Он возвращает добавленное представление.

var Mn = require('backbone.marionette');
var buttonView = new ButtonView();
var MyCollectionView = Mn.NextCollectionView.extend({
  onRender: function() {
    this.addChildView(buttonView, this.collection.length);
  }
});

var myCollectionView = new MyCollectionView();

myCollectionView.render();

NextCollectionView: Получение дочерних представлений

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

Дочерние элементы NextCollectionView: findByCid

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

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

Дочерние элементы NextCollectionView: findByModel

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

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

Дочерние элементы NextCollectionView: findByModelCid

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

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

Дочерние элементы NextCollectionView: findByIndex

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

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

Дочерние элементы NextCollectionView: findIndexByView

Найти индекс представления внутри дочерних элементов

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

NextCollectionView's removeChildView

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

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

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

Mn.NextCollectionView.extend({
  onChildViewClose: function(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);
  }
});

NextCollectionView's detachChildView

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

NextCollectionView's swapChildViews

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

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

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

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

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

var myCollection = new Mn.NextCollectionView({
  collection: collection,
  childView: MyChildView
});

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

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

Итераторы и функции коллекций NextCollectionView childView

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

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

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

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

var collectionView = new Mn.NextCollectionView({
  collection: new Bb.Collection()
});

collectionView.render();

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

NextCollectionView's filter

Метод filter переберёт NextCollectionView children и проверит их по отношению к viewFilter. Представления, прошедшие viewFilter, будут отрисованы при необходимости и прикреплены к CollectionView, а отфильтрованные представления будут отделены. Если viewFilter существует, будут вызваны события before:filter и filter. По умолчанию NextCollectionView будет перефильтровывать, когда представления изменятся или когда NextCollectionView отсортирован.

NextCollectionView's viewFilter

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

NextCollectionView's viewFilter в качестве функции

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

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

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

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

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

NextCollectionView's viewFilter в качестве предикатного объекта

Предикатный объект viewFilter будет фильтровать по атрибутам модели представления.

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

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

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

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

NextCollectionView's viewFilter в качестве предикатного объекта

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

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

var cv = new Mn.NextCollectionView({
  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 '2'
cv.render();

NextCollectionView's getFilter

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

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

var MyCollectionView = Mn.NextCollectionView.extend({
  summaryFilter: function(view) {
    return view.model.get('type') === 'summary';
  },
  getFilter: function() {
    if(this.collection.length > 100) {
      return this.summaryFilter;
    }
    return this.viewFilter;
  }
});

NextCollectionView's setFilter

Метод setFilter изменяет атрибут NextCollectionView и фильтрует. Передача { preventRender: true } в параметре options предотвратит отображение представления.

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

var cv = new Mn.NextCollectionView({
  collection: someCollection
});

cv.render();

var 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();

NextCollectionView's removeFilter

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

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

var cv = new Mn.NextCollectionView({
  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 });

NextCollectionView's sort

Метод sort пройдёт по NextCollectionView children и отсортирует их с помощью viewComparator. По умолчанию, если viewComparator не задан, NextCollectionView отсортирует представления по порядку моделей в коллекции. Если установлено значение false, сортировка представлений будет отключена. Этот метод также вызывается во время отрисовки, и события before:sort и sort будут вызваны до и после сортировки.

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

NextCollectionView's viewComparator

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

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

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

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

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

myCollection.comparator = 'id';

var mySortedColView = new Mn.NextCollectionView({
  //...
  collection: myCollection
});

var myUnsortedColView = new Mn.NextCollectionView({
  //...
  collection: myCollection,
  sort: false
});

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

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

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

NextCollectionView's getComparator

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

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

var MyCollectionView = Mn.NextCollectionView.extend({
  sortAsc: function(model) {
    return -model.get('order');
  },
  sortDesc: function(model) {
    return model.get('order');
  },
  getComparator: function() {
    // The collectionView's model
    if (this.model.get('sorted') === 'ASC') {
      return this.sortAsc;
    }

    return this.sortDesc;
  }
});

NextCollectionView's setComparator

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

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

var cv = new Mn.NextCollectionView({
  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();

NextCollectionView's removeComparator

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

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

var cv = new Mn.NextCollectionView({
  collection: someCollection
});

cv.render();

cv.setComparator('orderBy');

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

NextCollectionView's sortWithCollection

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

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

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

myCollection.comparator = 'id';

var mySortedColView = new Mn.NextCollectionView({
  //...
  collection: myCollection
});

var myUnsortedColView = new Mn.NextCollectionView({
  //...
  collection: myCollection,
  sortWithCollection: false
});

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

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

Связывание ui

По умолчанию, NextCollectionView не связывает объект ui. Поскольку у него нет собственного прямого template для управления, это обычно не проблема. В некоторых случаях связывание ui может быть полезно, когда необходимо получить доступ к элементам внутри дочерних элементов NextCollectionView с помощью getUI().

Если вам нужно связать ui самостоятельно, вы можете просто запустить bindUIElements для коллекции:

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

var MyCollectionView = Mn.NextCollectionView.extend({
  ...

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

var collectionView = new MyCollectionView();

collectionView.bindUIElements();

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