Marionette.CompositeView

DEPRECATED: CompositeView is deprecated. See CollectionView to see how to build equivalent views in Marionette 3

A CompositeView extends from CollectionView to be used as a composite view for scenarios where it should represent both a branch and leaf in a tree structure, or for scenarios where a collection needs to be rendered within a wrapper template. By default the CompositeView will maintain a sorted collection's order in the DOM. This behavior can be disabled by specifying {sort: false} on initialize.

Please see the Marionette.CollectionView documentation for more information on available features and functionality.

Пример использования: Деревовидный вид

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

var CompositeView = Marionette.CompositeView.extend({
  template: "#leaf-branch-template"
});

new CompositeView({
  model: someModel,
  collection: someCollection
});

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

• Модель составного представления template
• Дочернее представление составного представления childView
• Контейнер дочернего представления составного представления childViewContainer
• Присоединение HTML к составному представлению attachHtml
• Отображение дочерних элементов составного представления renderChildren
• Рекурсивное отображение по умолчанию
• Отображение модели и коллекции
• События и обратные вызовы
• Организация элементов пользовательского интерфейса
• modelEvents и collectionEvents

Модель составного представления template

Когда отображается CompositeView, будет отображен model с template, с которым настроено представление. Вы можете переопределить шаблон, передав его в качестве параметра конструктора:

new MyComp({
  template: "#some-template"
});

Параметр collection по умолчанию не передаётся в контекст шаблона. Если вашему template нужен доступ к коллекции, вам нужно передать её через templateContext.

new MyComp({
  template: "#some-template",
  templateContext: function() {
    return { items: this.collection.toJSON() };
  }
})

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

Каждое дочернее представление будет отображено с использованием шаблона childView. Шаблон CompositeView отображается, а шаблоны дочерних представлений добавляются к нему.

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

var CompView = Marionette.CompositeView.extend({
  childView: ChildView
});

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

Дополнительную информацию см. в документации CollectionView.

Контейнер дочернего представления составного представления childViewContainer

По умолчанию составное представление использует тот же метод attachHtml, что и представление коллекции. Это означает, что представление будет использовать метод jQuery .append для перемещения содержимого HTML из экземпляра дочернего представления в el представления коллекции.

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

Например, если вы создаёте представление таблицы и хотите добавить каждый элемент из коллекции в <tbody> таблицы, вы можете сделать это с помощью шаблона:

<script id="row-template" type="text/html">
  <td><%= someData %></td>
  <td><%= moreData %></td>
  <td><%= stuff %></td>
</script>

<script id="table-template" type="text/html">
  <table>
    <thead>
      <tr>
        <th>Some Column</th>
        <th>Another Column</th>
        <th>Still More</th>
      </tr>
    </thead>

    <!-- want to insert collection children, here -->
    <tbody></tbody>

    <tfoot>
      <tr>
        <td colspan="3">some footer information</td>
      </tr>
    </tfoot>
  </table>
</script>

Чтобы ваши экземпляры дочерних представлений отображались внутри <tbody> этой структуры таблицы, укажите childViewContainer в вашем составном представлении, как показано ниже:

var RowView = Marionette.View.extend({
  tagName: "tr",
  template: "#row-template"
});

var TableView = Marionette.CompositeView.extend({
  childView: RowView,

  // specify a jQuery selector to put the `childView` instances into
  childViewContainer: "tbody",

  template: "#table-template"
});

Это поместит все экземпляры childView в тег <tbody> шаблона составного представления, правильно создав структуру таблицы.

В качестве альтернативы вы можете указать функцию как childViewContainer. Эта функция должна возвращать строку селектора jQuery или объект селектора jQuery.

var TableView = Marionette.CompositeView.extend({
  // ...

  childViewContainer: function(){
    return "#my-tbody"
  }
});

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

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

var myComp = new Marionette.CompositeView({
  // ...,

  childViewContainer: "#my-tbody"
});

Присоединение HTML к составному представлению attachHtml

Иногда конфигурация childViewContainer недостаточна для указания места, где должен быть размещен экземпляр childView. Если это так, вы можете переопределить метод attachHtml своей собственной реализацией.

Дополнительную информацию об этом методе см. в документации CollectionView.

Выбор контейнера дочернего представления составного представления childView

Метод getChildViewContainer получает второй параметр childView, который, при переопределении, позволяет более точно выбрать контейнер, предоставляя доступ к childView, который собирается быть добавлен в containerView возвращаемый getChildViewContainer.

Отображение дочерних элементов составного представления renderChildren

Метод renderChildren повторно отображает представления внутри childViewContainer для коллекции без повторного отображения окружающего шаблона.

Рекурсивное отображение по умолчанию

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

Отображение модели и коллекции

Модель и коллекция для составного представления будут повторно отображаться в следующих условиях:

• При срабатывании события «reset» коллекции, будет отображена только коллекция внутри составного представления, а не шаблон оболочки
• При добавлении модели в коллекцию (срабатывает событие «add»), это одно дочернее представление будет отображено в списке
• При удалении модели из коллекции (срабатывает событие «remove»), это одно дочернее представление будет удалено из списка

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

События и обратные вызовы

Во время отображения составного представления будут вызваны несколько событий. Эти события вызываются с помощью функции Marionette.triggerMethod, которая вызывает соответствующий метод «on{EventName}» в представлении.

• "before:render:children" / onBeforeRenderChildren - перед отображением коллекции моделей
• "render:children" / onRenderChildren - после отображения коллекции моделей
• "before:render" / onBeforeRender - перед отображением чего-либо
• "render" / onRender - после отображения всего

Кроме того, после отображения составного представления будет вызван метод onRender. Вы можете реализовать это в своём представлении, чтобы предоставить пользовательский код для работы с el представления после его отображения:

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

Организация элементов пользовательского интерфейса

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

Элементы пользовательского интерфейса будут доступны сразу после отображения шаблона составного представления (и до отображения коллекции), что означает, что вы можете получить к ним доступ даже в методе onBeforeRender.

modelEvents и collectionEvents

Составные представления могут напрямую подписываться на события моделей и коллекции декларативным способом:

Marionette.CompositeView.extend({
  modelEvents: {
    "change": "modelChanged"
  },

  collectionEvents: {
    "add": "modelAdded"
  }
});