Marionette.ItemView

An ItemView является представлением одного элемента. Этот элемент может быть Backbone.Model или Backbone.Collection. В любом случае, он будет рассматриваться как отдельный элемент.

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

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

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

• ItemView render
• Отображение коллекции в ItemView
• ItemView без шаблона
• События и обратные вызовы
  • Событие «before:render»/onBeforeRender
  • Событие «render»/onRender
  • Событие «before:destroy»/onBeforeDestroy
  • Событие «destroy»/onDestroy
• ItemView serializeData
• Организация элементов пользовательского интерфейса
• modelEvents и collectionEvents

ItemView render

В отличие от Backbone Views, все представления Marionette поставляются с мощным методом render. Фактически, основные различия между представлениями заключаются в различиях в методах render. Само собой разумеется, что переопределение метода render любого представления Marionette не рекомендуется. Вместо этого вы должны использовать onBeforeRender и onRender обратные вызовы, чтобы добавить дополнительную функциональность в отрисовку вашего представления.

ItemView делегирует фактическую отрисовку шаблона объекту Marionette.Renderer.

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

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

var MyView = Marionette.ItemView.extend({
  template: "#some-template"
});

new MyView().render();

.. либо функцией, принимающей один аргумент: объект, возвращаемый ItemView.serializeData:

var my_template_html = '<div><%= args.name %></div>'
var MyView = Marionette.ItemView.extend({
  template : function(serialized_model) {
    var name = serialized_model.name;
    return _.template(my_template_html)({
        name : name,
        some_custom_attribute : some_custom_key
    });
  }
});

new MyView().render();

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

Для получения дополнительной информации о функции _.template см. документацию Underscore.

Отображение коллекции в ItemView

Хотя наиболее распространенный способ отображения Backbone.Collection — использование CollectionView или CompositeView, если вам нужно отобразить простой список, не требующий большого взаимодействия, использование этих методов не всегда целесообразно. Backbone.Collection можно отобразить с помощью простого ItemView, используя шаблоны для итерации по массиву items.

<script id="some-template" type="text/html">
  <ul>
    <% _.each(items, function(item){ %>
    <li> <%= item.someAttribute %> </li>
    <% }); %>
  </ul>
</script>

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

Затем, с помощью JavaScript, вы можете определить и использовать ItemView с этим шаблоном следующим образом:

var MyItemsView = Marionette.ItemView.extend({
  template: "#some-template"
});

var view = new MyItemsView({
  collection: someCollection
});

// show the view via a region or calling the .render method directly

Отображение этого представления преобразует коллекцию someCollection в массив items для использования в вашем шаблоне.

Дополнительную информацию о том, когда это необходимо делать и какие у вас есть варианты получения отдельного элемента, на который был нажат или с которым взаимодействовали, см. в статье на блог-платформе Getting The Model For A Clicked Element.

ItemView без шаблона

ItemView также можно прикрепить к существующим элементам. Основное преимущество этого — прикрепление поведения и событий к статическому содержимому, которое было отображено вашим сервером (обычно для целей SEO). Для настройки ItemView без шаблона атрибут template должен быть false.

<div id="my-element">
  <p>Hello World</p>
  <button class="my-button">Click Me</button>
</div>

var MyView = Marionette.ItemView.extend({
  el: '#my-element',

  template: false,

  ui: {
    paragraph: 'p',
    button: '.my-button'
  },

  events: {
    'click @ui.button': 'clickedButton'
  },

  clickedButton: function() {
    console.log('I clicked the button!');
  }
});

var view = new MyView();
view.render();

view.ui.paragraph.text();        // returns 'Hello World'
view.ui.button.trigger('click'); // logs 'I clicked the button!'

Другой случай использования — когда вы хотите прикрепить Marionette.ItemView к графическому элементу SVG или элементу canvas, чтобы предоставить единый интерфейс представления слоя для нестандартных узлов DOM. Отсутствие шаблона также позволяет использовать представление на предварительно отображенных узлах DOM, таких как сложные графические элементы.

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

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

Событие «before:render»/onBeforeRender

Вызывается перед отрисовкой ItemView.

Marionette.ItemView.extend({
  onBeforeRender: function(){
    // set up final bits just before rendering the view's `el`
  }
});

Событие «render»/onRender

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

Marionette.ItemView.extend({
  onRender: function(){
    // manipulate the `el` here. it's already
    // been rendered, and is full of the view's
    // HTML, ready to go.
  }
});

Событие «before:destroy»/onBeforeDestroy

Вызывается непосредственно перед уничтожением представления, когда был вызван метод destroy() представления.

Marionette.ItemView.extend({
  onBeforeDestroy: function(){
    // manipulate the `el` here. it's already
    // been rendered, and is full of the view's
    // HTML, ready to go.
  }
});

Событие «destroy»/onDestroy

Вызывается сразу после уничтожения представления.

Marionette.ItemView.extend({
  onDestroy: function(){
    // custom destroying and cleanup goes here
  }
});

ItemView serializeData

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

Если сериализация — модель, результаты передаются напрямую:

var myModel = new MyModel({foo: "bar"});

new MyItemView({
  template: "#myItemTemplate",
  model: myModel
});

MyItemView.render();

<script id="myItemTemplate" type="template">
  Foo is: <%= foo %>
</script>

Если сериализация — коллекция, результаты передаются в виде массива items.

var myCollection = new MyCollection([{foo: "bar"}, {foo: "baz"}]);

new MyItemView({
  template: "#myCollectionTemplate",
  collection: myCollection
});

MyItemView.render();

<script id="myCollectionTemplate" type="template">
  <% _.each(items, function(item){ %>
    Foo is: <%= foo %>
  <% }); %>
</script>

Если вам нужна настраиваемая сериализация данных, вы можете предоставить метод serializeData в своем представлении. Он должен вернуть допустимый объект JSON, как если бы вы вызвали .toJSON на модели или коллекции.

Marionette.ItemView.extend({
  serializeData: function(){
    return {
      "some attribute": "some value"
    }
  }
});

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

Как описано в Marionette.View, вы можете указать хеш ui в view, который отображает элементы пользовательского интерфейса по их селекторам jQuery. Это особенно полезно, если вы обращаетесь к одному и тому же элементу пользовательского интерфейса более одного раза в коде представления. Вместо дублирования селектора, вы можете просто сослаться на него с помощью this.ui.elementName.

Вы также можете использовать значения ui хеша внутри событий и триггерных ключей с помощью синтаксиса "@ui.elementName".

Marionette.ItemView.extend({
  tagName: "tr",

  ui: {
    checkbox: "input[type=checkbox]"
  },

  onRender: function() {
    if (this.model.get('selected')) {
      this.ui.checkbox.addClass('checked');
    }
  }
});

modelEvents и collectionEvents

ItemView может напрямую связывать события модели и события коллекции декларативным способом:

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

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

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