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

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

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

• Жизненный цикл представления
• Методы состояния жизненного цикла
  • isRendered()
  • isAttached()
  • isDestroyed()
• Создание представления
  • Использование setElement
• Отображение представления
  • View Отображение
  • CollectionView Отображение
• Отображение дочерних элементов
• Прикрепление представления
• Открепление представления
• Уничтожение представления
• Уничтожение дочерних элементов

Методы состояния жизненного цикла

И View и CollectionView разделяют методы для проверки состояния жизненного цикла.

isRendered()

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

isAttached()

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

isDestroyed()

Возвращает булево значение, отражающее, было ли представление уничтожено.

Создание представления

Представления Marionette — это представления Backbone, и поэтому при создании представления у представления есть el. Этот el будет корневым узлом для представления, и, кроме его содержимого, он не изменится за время существования представления, если его не изменить непосредственно (например: view.$el.addClass)

Представлению можно передать существующий el либо в DOM (например: el: $('.foo-selector')), либо в памяти (например: el: $('<div></div>')), или чаще всего, представление создает свой el при создании, как документировано на backbonejs.org.

Marionette определит начальное состояние представления, то есть считается ли представление уже отображенным или прикрепленным. Если представление уже отображено или прикреплено, его состояние отразит этот статус, но соответствующие события не будут активированы.

Дополнительную информацию о создании представления с предварительно отображенным DOM см.: Предварительно отображаемое содержимое.

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

Backbone.View позволяет пользователю изменить el представления после создания, используя setElement. Этот метод можно использовать и в Marionette, но следует проявлять осторожность. setElement переопределит события представления, но по существу проигнорирует дочерние элементы представления, будь то через regions или через children, и состояние представления behaviors также не будет знать об изменении. Вероятно, лучше создать новое представление с новым el , чем пытаться изменить el существующего представления.

Отображение представления

В Marionette отображение представления заключается в изменении содержимого el представления.

Показатель отображения немного отличается в двух представлениях Marionette.

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

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

Для View отображение подразумевает сериализацию данных представления, передачу их в шаблон и использование результатов этого шаблона для замены содержимого el. Таким образом, при создании View оно считается отображенным, если узел el содержит какое-либо содержимое. Однако после создания шаблон может отобразить пустое содержимое, в этом случае View по-прежнему будет считаться «отображенным», даже если оно не содержит содержимого.

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

Для CollectionView отображение означает, что children представления были созданы и прикреплены к el. Таким образом, в отличие от View, CollectionView можно создать с содержимым в el, но пока children не будут «отображены», все представление не будет считаться отображенным.

Важно отметить, что если при отображении нет children, представление все равно будет считаться отображенным. Это верно независимо от того, отображается ли emptyView. Таким образом, возможно, что CollectionView будет «отображено», но el будет только пустым тегом. Также обратите внимание, что, как и View, у CollectionView может быть template, который отображается и прикрепляется к el во время render, но отображение шаблона не влияет на состояние CollectionView.

Отображение дочерних элементов

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

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

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

В общем случае лучший способ добавить дочернее представление к View — использовать showChildView в событии отображения.

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

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

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

Добавление управляемых дочерних элементов

Если вы добавляете представление в дочерние элементы CollectionView, по умолчанию оно будет рассматриваться как любое другое представление, добавленное из collection. Это означает, что оно подчиняется viewComparator и viewFilter.

Поэтому, если вы учитываете добавленные представления в viewFilter и viewComparator, лучшим местом для добавления этих дочерних элементов, вероятно, будет событие render, поскольку представления будут добавлены только один раз (или повторно добавлены, если дочерние элементы перестроятся в последующих render) и управляться в сортировке или фильтрации по мере обновления collection.

Добавление неуправляемых дочерних элементов

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

Целью будет добавление неуправляемых представлений после добавления других представлений и удаление любых неуправляемых представлений перед любыми изменениями управляемых children. Для этого необходимо понять, какое CollectionView событие произойдет перед изменениями в children для вашего конкретного случая использования. По умолчанию CollectionView сортирует в соответствии с сортировкой collection, поэтому, если viewComparator отключен, лучшим событием для удаления неуправляемых представлений является before:sort событие, но если viewComparator равно false, следующим событием для рассмотрения является before:filter событие, если у вашего CollectionView есть viewFilter, в противном случае идеальным является before:render:children событие.

После того, как вы определили лучшую стратегию удаления неуправляемых дочерних элементов, добавление их лучше всего выполняется в render:children событии. Кроме того, добавление дочернего элемента с помощью addChildView само по себе вызовет эти события, поэтому для предотвращения переполнения стека лучше использовать флаг для защиты добавлений и вставлять новое представление в указанный индекс.

Следующий упрощенный пример добавит неуправляемое представление в 5-й индекс и удалит его перед любыми изменениями children. В реальном сценарии, скорее всего, будет сложнее отследить, какое представление удалить в onBeforeSort.

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  childView: MyChildView,
  onBeforeSort() {
    this.removeChildView(this.children.findByIndex(5));
  },
  onRenderChildren() {
    this.addFooView();
  },
  addFooView() {
    if (this.addingFooView) {
      return;
    }

    this.addingFooView = true;
    this.addChildView(new FooView(), 5);
    this.addingFooView = false;
  }
});

Прикрепление представления

В Marionette представление прикреплено, если el представления можно найти в DOM. Лучшее время для добавления обработчиков событий к el представления, вероятно, в событии прикрепления.

Хотя el представления может быть прикреплено, содержимое представления может быть удалено и добавлено в течение срока существования представления. Если вы добавляете обработчики событий к содержимому представления, а не к attach, то событие dom:refresh было бы лучшим вариантом.

Состояние прикрепления сохраняется при прикреплении представления с Region или как дочерний элемент CollectionView или во время создания представления. Если представление прикрепляется иными способами, например, через $.append [isAttached], возможно, это не отражает фактического состояния прикрепления.

Открепление представления

Представление открепляется, когда его el удаляется из DOM. Лучшее время для очистки любых обработчиков событий, добавленных к el, — это событие открепления.

Хотя el представления может остаться прикрепленным, его содержимое будет удалено при отображении. Если вы добавили обработчики событий к содержимому представления, а не к before:detach, то событие dom:remove было бы лучшим вариантом.

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

Уничтожение представления (например: myView.destroy()) очищает все созданное внутри Marionette, чтобы, если экземпляр представления больше не используется, представление могло быть очищено сборщиком мусора браузера.

Событие before:destroy — лучшее место для удаления добавленных слушателей, не связанных с DOM представления.

Состояние представления после уничтожения не прикреплено и не отрисовано, хотя el не очищается.

Уничтожение дочерних элементов

Дочерние элементы, добавленные в область View или через CollectionView, будут автоматически уничтожены, если представление перерисовывается, если представление уничтожается или для CollectionView, если collection сброшен.

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