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

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

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

• View Жизненный цикл
  • Жизненный цикл создания представления
  • Жизненный цикл уничтожения представления
  • События создания представления
  • События уничтожения представления
  • Другие события представления
• CollectionView Жизненный цикл
  • Жизненный цикл создания коллекции
  • Жизненный цикл уничтожения коллекции
  • События создания коллекции
  • События уничтожения коллекции
  • Другие события коллекции
• NextCollectionView Жизненный цикл
  • Жизненный цикл создания NextCollectionView
  • Жизненный цикл уничтожения NextCollectionView
  • События создания NextCollectionView
  • События уничтожения NextCollectionView
  • События NextCollectionView EmptyView
• Методы состояния жизненного цикла
  • isRendered()
  • isAttached()
• Представления, связанные с ранее отрисованным или подключенным DOM
• Region и жизненный цикл представления
  • События показа представления
  • События очистки области
• Расширенные настройки событий

View Жизненный цикл

Представления Marionette определяют ряд событий во время жизненного цикла создания и уничтожения — когда представление отображается в области и из неё удаляется. В документации мы будем ссылаться на имя события, хотя можно использовать onEvent обработку.

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

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

Когда представление инициализируется и затем отображается внутри области (используя showChildView()) будет вызвана последовательность событий в определённом порядке.

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

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

Когда region.empty() вызывается, представление уничтожается, вызывая события как часть жизненного цикла уничтожения.

События, помеченные звёздочкой, срабатывают только тогда, когда представление было подключено к DOM.

Жизненный цикл уничтожения ChildView

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

События, помеченные звёздочкой, срабатывают только тогда, когда представление было подключено к DOM.

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

Эти события срабатывают во время создания и отрисовки представления в области.

Представление before:render

Срабатывает перед отрисовкой представления.

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

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

Представление render

Это оптимальное событие для обработки дочерних представлений.

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

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

Mn.View.extend({
  onRender: function() {
    console.log('el exists but is not visible in the DOM');
  }
});

Представление before:attach

Срабатывает после отрисовки представления, но перед первым связыванием с DOM страницы. Это будет вызвано только один раз на region.show(). Если вы повторно отрисовываете представление после того, как оно было показано, вы, скорее всего, хотите прослушивать события render или dom:refresh.

Представление attach

Это оптимальное событие для обработки случаев, когда el представления должно быть в DOM. Очистите все добавленные обработчики в before:detach.

Срабатывает, когда представление привязано к DOM. Это срабатывает только один раз — в первый раз, когда представление подключается к DOM. Если вы повторно отрисовываете представление после того, как оно было показано, вы, скорее всего, хотите прослушивать событие dom:refresh.

Представление dom:refresh

Это оптимальное событие для обработки случаев, когда содержимое представления должно быть в DOM. Очистите все добавленные обработчики в dom:remove.

Событие dom:refresh срабатывает в двух разных местах:

1. После того, как представление подключено к DOM (после события attach)
2. Каждый раз, когда вызывается метод render

const myView = new Mn.View({
  template: _.template('<span><%= count %><span>'),
  templateContext: function() {
    this.count = (this.count || 0) + 1;
    return {
      count: this.count
    };
  },

  onRender: function() {
    console.log('render');
  },

  onAttach: function() {
    console.log('attach');
  },

  onDomRefresh: function() {
    console.log('dom:refresh');
  }
});

// some layout view
layout.showChildView('myRegion', myView);
/*
  Output:
  render
  attach
  dom:refresh
*/

myView.render();
/*
  Output:
  render
  dom:refresh
*/

События уничтожения представления

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

Представление before:destroy

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

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

Mn.View.extend({
  onBeforeDestroy: function() {
    // custom destroying and non-DOM related cleanup goes here
  }
});

Представление before:detach

Это оптимальное событие для очистки всего, что было добавлено в onAttach.

View будет вызывать событие before:detach при отрисовке представления и его удалении из DOM. Если представление не было подключено к DOM, это событие не будет вызвано.

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

Mn.View.extend({
  onBeforeDetach: function() {
    // custom destroying and DOM related cleanup goes here
  }
});

Представление detach

View будет вызывать событие detach при отрисовке представления и его удалении из DOM.

Представление dom:remove

Это оптимальное событие для очистки всего, что было добавлено в onDomRefresh.

Событие dom:remove срабатывает в двух разных местах:

1. Перед тем, как представление отсоединится от DOM (после события before:detach)
2. Каждый раз при вызове метода render, если представление уже отрисовано.

const myView = new Mn.View({
  template: _.template('<span><%= count %><span>'),
  templateContext: function() {
    this.count = (this.count || 0) + 1;
    return {
      count: this.count
    };
  },

  onBeforeRender: function() {
    console.log('before:render');
  },

  onRender: function() {
    console.log('render');
  },

  onBeforeDetach: function() {
    console.log('before:detach');
  },

  onDetach: function() {
    console.log('detach');
  },

  onDomRemove: function() {
    console.log('dom:remove');
  }
});

// some layout view
layout.showChildView('myRegion', myView);

myView.render();
/*
  Output:
  before:render
  dom:remove
  render
*/

myView.destroy();
/*
  Output:
  before:detach
  dom:remove
  detach
*/

Представление destroy

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

Другие события представления

Эти события срабатывают при выполнении определённых действий с представлением.

Представление before:add:region

Когда вы добавляете область в представление — через addRegion(), событие before:add:region будет срабатывать непосредственно перед фактическим добавлением области.

Представление add:region

Когда область добавляется в представление — через addRegion(), событие add:region будет срабатывать. Это происходит сразу после добавления области и её доступности для использования в представлении.

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

var MyView = Mn.View.extend({
  onAddRegion: function(name, region) {
    console.log('Region called ' + name + ' was added');
  }
});

var myView = new MyView();
myView.addRegion('regionName', '#selector');

Представление before:remove:region

View будет вызывать событие before:remove:region перед удалением области из представления. Это позволяет выполнить любые операции по очистке перед удалением области.

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

var MyView = Mn.View.extend({
  onBeforeRemoveRegion: function(name) {
    console.log('Region called ' + name + ' is about to be removed');
  },

  regions: {
    regionName: '#selector'
  }
});

var myView = new MyView();
myView.removeRegion('foo');

Представление remove:region

View будет вызывать событие remove:region при удалении области из представления. Это позволяет использовать экземпляр области в последний раз или удалить область из объекта, имеющего на неё ссылку:

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

var view = new Mn.View();

view.on('remove:region', function(name, region) {
  // add the region instance to an object
  delete myObject[name];
});

view.addRegion('foo', '#bar');

view.removeRegion('foo');

CollectionView Жизненный цикл

У CollectionView свой жизненный цикл вокруг стандартного View события отрисовки жизненного цикла. Этот раздел описывает срабатывающие события и что они обозначают.

Жизненный цикл создания коллекции

Жизненный цикл создания CollectionView может пойти двумя путями в зависимости от того, заполнена коллекция или пуста. Ниже приведена таблица, показывающая порядок срабатывания событий отрисовки:

События, помеченные «*», срабатывают только для пустых коллекций, а события, помеченные «+», срабатывают для коллекций с элементами.

Жизненный цикл уничтожения коллекции

Когда CollectionView уничтожается, срабатывает ряд событий, отражающих различные стадии процесса уничтожения.

События, помеченные «*», срабатывают только для пустых коллекций, а события, помеченные «+», срабатывают для коллекций с элементами.

События создания коллекции

CollectionView before:render

Срабатывает перед началом процесса рендеринга CollectionView. См. before:render Документацию для примера.

CollectionView before:render:empty

Срабатывает непосредственно перед рендерингом коллекции emptyView. Это не будет срабатывать, если коллекция содержит 1 или более элементов.

CollectionView before:render:children

Это событие срабатывает непосредственно перед рендерингом дочерних элементов в CollectionView. Оно срабатывает только если коллекция содержит хотя бы один элемент.

CollectionView before:add:child

Это событие срабатывает перед добавлением каждого дочернего элемента в представление. Если коллекция пуста, это событие срабатывает один раз для emptyView.

CollectionView add:child

Это событие срабатывает после добавления каждого дочернего элемента в представление. Оно срабатывает один раз для каждого элемента во вложенной коллекции.

Если коллекция пуста, это событие срабатывает ровно один раз для emptyView.

CollectionView render:empty

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

CollectionView render:children

Это событие срабатывает после отрисовки всех дочерних представлений коллекции. Оно срабатывает только если коллекция содержит хотя бы один элемент. Оно также может срабатывать, когда reorderOnSort имеет значение false:

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

var MyView = Mn.CollectionView.extend({
  onRenderChildren: function({
    console.log('The collectionview children have been rendered');
  })
});

var myView = new MyView({
  collection: new Bb.Collection([{ id: 1 }]);
});

myView.render();

CollectionView render

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

События уничтожения коллекции

CollectionView before:destroy

Срабатывает в начале процесса уничтожения. Это наиболее подходящее место для выполнения необходимой очистки в CollectionView.

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

var MyView = Mn.CollectionView.extend({
  onBeforeDestroy: function() {
    console.log('The CollectionView is about to be destroyed');
  }
});

var myView = new MyView();

myView.destroy();

CollectionView before:detach

Срабатывает непосредственно перед удалением CollectionView из DOM. Если необходимо удалить обработчики событий или выполнить изменения в пользовательском интерфейсе, это лучшее время для этого.

CollectionView detach

Срабатывает сразу после удаления CollectionView из DOM. Элементы представления по-прежнему будут существовать в памяти, если вам нужно к ним обратиться.

CollectionView before:destroy:children

Это срабатывает непосредственно перед уничтожением элементов childView.

Срабатывает при уничтожении collectionView или перед повторным рендерингом дочерних элементов collectionView.

CollectionView before:remove:empty

Это срабатывает непосредственно перед удалением emptyView из CollectionView. Это срабатывает только если у присоединённой collection нет элементов.

Затем emptyView пройдёт через свой собственный жизненный цикл уничтожения

CollectionView before:remove:child

Это срабатывает для каждого childView который удаляется из CollectionView Это может срабатывать только если collection содержит элементы.

Каждый элемент в CollectionView пройдёт через жизненный цикл уничтожения

CollectionView remove:empty

Срабатывает после удаления emptyView и завершения его жизненного цикла уничтожения. Это срабатывает только если у присоединённой collection нет элементов.

CollectionView remove:child

Срабатывает для каждого удалённого представления из CollectionView. Это может срабатывать только если collection содержит элементы.

CollectionView destroy

Срабатывает после того, как CollectionView был уничтожен и больше не существует.

Другие события коллекции

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

reorder / before:reorder события

Когда reorderOnSort установлено в true, эти события срабатывают для переупорядочения коллекции.

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

var MyView = Mn.CollectionView.extend({...});

var myCol = new Bb.Collection({ comparator: ... })
var myView = new MyView({ reorderOnSort: true });

myView.render();
myCol.comparator = function () { return this.get('foo'); };

myView.on({
  'reorder': function() {
    console.log('the collection view has been reordered following its collection');
  },
  'before:reorder': function() {
    console.log('the collection view is about to be reordered');
  }
});

myCol.sort()

NextCollectionView Жизненный цикл

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

Жизненный цикл создания NextCollectionView

Жизненный цикл создания NextCollectionView может пройти по двум путям в зависимости от того, содержит ли коллекция элементы или является пустой. В таблице ниже показан порядок срабатывания событий рендеринга:

"*" только срабатывает, если NextCollectionView полностью отрисовывается с помощью collectionView.render() или collectionView.collection.reset(). "+" включая и после этого момента срабатывает только если есть дочерние элементы для отрисовки. "#" срабатывает только если определён viewFilter. "**" срабатывает при использовании в родительском элементе, когда CollectionView отображается в области или как дочернее представление другого CollectionView.

Жизненный цикл уничтожения NextCollectionView

Когда NextCollectionView уничтожается, он вызывает ряд событий, отражающих различные этапы процесса уничтожения.

События, помеченные знаком "+", срабатывают только для коллекций с дочерними элементами.

События создания NextCollectionView

NextCollectionView before:render

Срабатывает перед началом процесса отрисовки NextCollectionView. См. before:render документацию для примера.

NextCollectionView before:add:child

Это событие срабатывает перед добавлением каждого дочернего элемента к дочерним элементам.

NextCollectionView add:child

Это событие срабатывает после добавления каждого дочернего элемента к дочерним элементам. Оно срабатывает один раз для каждого элемента во вложенной коллекции.

NextCollectionView before:sort

Это событие срабатывает непосредственно перед сортировкой дочерних элементов в NextCollectionView. По умолчанию срабатывает только если у collectionView есть хотя бы один дочерний элемент.

NextCollectionView sort

Это событие срабатывает после сортировки дочерних элементов в NextCollectionView. По умолчанию срабатывает только если у collectionView есть хотя бы один дочерний элемент.

NextCollectionView before:filter

Это событие срабатывает непосредственно перед фильтрацией дочерних элементов в NextCollectionView. По умолчанию срабатывает только если у collectionView есть хотя бы один дочерний элемент и есть viewFilter.

NextCollectionView filter

Это событие срабатывает после фильтрации дочерних элементов в NextCollectionView. По умолчанию срабатывает только если у collectionView есть хотя бы один дочерний элемент и есть viewFilter.

NextCollectionView before:render:children

Это событие срабатывает непосредственно перед отрисовкой дочерних элементов в NextCollectionView. По умолчанию срабатывает только если у collectionView есть хотя бы один дочерний элемент, не отфильтрованный.

NextCollectionView render:children

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

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

var MyView = Mn.NextCollectionView.extend({
  onRenderChildren: function({
    console.log('The collectionview children have been rendered');
  })
});

var myView = new MyView({
  collection: new Bb.Collection([{ id: 1 }]);
});

myView.render();

NextCollectionView render

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

События уничтожения NextCollectionView

NextCollectionView before:destroy

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

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

var MyView = Mn.NextCollectionView.extend({
  onBeforeDestroy: function() {
    console.log('The CollectionView is about to be destroyed');
  }
});

var myView = new MyView();

myView.destroy();

NextCollectionView before:detach

Срабатывает непосредственно перед удалением NextCollectionView из DOM. Если нужно удалить обработчики событий или изменения пользовательского интерфейса, это лучшее время для этого.

NextCollectionView detach

Срабатывает сразу после удаления NextCollectionView из DOM. Элементы представления по-прежнему будут существовать в памяти, если вам нужно к ним обратиться.

NextCollectionView before:destroy:children

Срабатывает непосредственно перед уничтожением элементов childView.

Срабатывает при уничтожении NextCollectionView или перед повторной отрисовкой дочерних элементов NextCollectionView.

NextCollectionView before:remove:child

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

Каждый элемент в NextCollectionView будет проходить через жизненный цикл уничтожения

NextCollectionView remove:child

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

NextCollectionView destroy:children

Срабатывает сразу после уничтожения элементов childView.

Срабатывает при уничтожении NextCollectionView или перед повторной отрисовкой дочерних элементов NextCollectionView.

NextCollectionView destroy

Срабатывает, когда NextCollectionView был уничтожен и больше не существует.

События NextCollectionView EmptyView

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

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

var MyView = Mn.NextCollectionView.extend({
  emptyView: MyEmptyView
});

var myView = new MyView();

myView.emptyRegion.on({
  show: function() {
    console.log('CollectionView is empty!');
  },
  empty: function() {
    console.log('CollectionView is removing the emptyView');
  }
});

myView.render();

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

Как View, так и CollectionView имеют методы проверки прикреплён ли элемент или отрисован.

isRendered()

Эта функция возвращает значение булевого типа, отражающее, было ли представление отрисовано.

isAttached()

Эта функция возвращает булево значение, отражающее, считает ли представление, что оно прикреплено. Это сохраняется при присоединении представления с помощью Region или при создании представления. Если представление присоединено другим способом, эта функция может не отражать фактическое состояние прикрепления. Для точности используйте Marionette.isNodeAttached.

Представления, связанные с ранее отрисованным или прикреплённым DOM

При создании представления, если el представления установлен на существующий узел, представление isRendered() вернёт true, и события before:render, render не будут вызваны при отображении представления в области.

Аналогично, если el прикреплено к узлу в DOM, представление isAttached() вернёт true, и события before:attach, attach и dom:refresh не будут вызваны при отображении представления в области.

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

При отображении представления внутри области — с использованием region.show(view) или showChildView('region', view) — Region будет генерировать события вокруг событий представления, на которые можно подписаться.

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

При отображении представления внутри области, область генерирует ряд событий:

Область before:show

Выводится в region.show(view), до начала жизненного цикла вида. На данном этапе рендеринг вида ещё не выполнен.

Область show

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

События пустой области

При очищении области, будут вызваны события уничтожения вокруг жизненного цикла уничтожения вида:

Область before:empty

Вызывается перед началом процесса уничтожения вида. Это может произойти при вызове region.empty() или при выполнении region.show(view) в области, отображающей другой вид. Также оно будет вызвано, если вид в области будет уничтожен.

Область empty

Вызывается после завершения всего процесса уничтожения. На этом этапе вид полностью удалён из DOM.

Дополнительные настройки событий

Marionette может вызывать attach/detach события по дереву представления вместе с вызовом dom:refresh/dom:remove событий из-за монитора событий представления. Этот монитор запускается при создании или отображении представления в области (для обработки представлений, не относящихся к Marionette).

В некоторых случаях может быть полезно улучшить производительность, отключив эту функциональность. Это делается очень просто, установив monitorViewEvents: false в классе представления.

const NonMonitoredView = Mn.View.extend({
  monitorViewEvents: false
});

Важно: Отключение монитора представлений нарушит генерируемые события монитора для этого представления и всех дочерних представлений этого представления. Отключение должно выполняться с осторожностью.