Spec-Zone.ru › Marionette.js 4

Класс Events

Marionette использует triggerMethod для внутреннего вызова различных событий, используемых в классах. Это предоставляет 'onEvent' привязку, обеспечивая удобные крючки для обработки событий класса. Важно отметить, что все внутренние события будут передавать экземпляр вызывающего класса в качестве первого аргумента события.

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

  • События приложения
    • before:start событие
    • start событие
  • События поведения
    • initialize событие
    • Проксированные события
  • События области
    • show и before:show события
    • empty и before:empty события
  • События MnObject
  • События представления
    • add:region и before:add:region события
    • remove:region и before:remove:region события
  • События CollectionView
    • add:child и before:add:child события
    • remove:child и before:remove:child события
    • sort и before:sort события
    • filter и before:filter события
    • render:children и before:render:children события
    • destroy:children и before:destroy:children события
    • События области пустого представления CollectionView
  • События изменений DOM
    • render и before:render события
    • attach и before:attach события
    • detach и before:detach события
    • dom:refresh событие
    • dom:remove событие
    • Дополнительные параметры событий
  • События уничтожения
    • destroy и before:destroy события
  • Поддержка представлений Backbone
    • Marionette.Events и triggerMethod
    • События жизненного цикла

События приложения

Объект Application будет вызывать два события:

before:start событие

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

start событие

Вызывается в ходе запуска приложения. Здесь необходимо отображать представления и запускать Backbone.history.

import Bb from 'backbone';
import { Application } from 'backbone.marionette';

import MyModel from './mymodel';
import MyView from './myview';

const MyApp = Application.extend({
  region: '#root-element',

  initialize(options) {
    console.log('Initialize' + options.foo);
  },

  onBeforeStart(app, options) {
    this.model = new MyModel(options.data);
  },

  onStart(app, options) {
    this.showView(new MyView({model: this.model}));
    Bb.history.start();
  }
});

const myApp = new MyApp({ foo: 'My App' });
myApp.start({ data: { bar: true } });

Пример в реальном времени

Как показано, объект options передаётся в Application в качестве второго аргумента к start.

События приложения destroy

Класс Application также вызывает События уничтожения.

События поведения

initialize событие

После построения и инициализации представления и поведения, последним событием является событие initialize на поведении, которое передаёт экземпляр представления и любые параметры, переданные представлению при создании.

import { Behavior, View } from 'backbone.marionette';

const MyBehavior = Behavior.extend({
  onInitialize(view, options) {
    console.log(options.msg);
  }
});

const MyView = View.extend({
  behaviors: [MyBehavior]
});

const myView = new MyView({ msg: 'view initialized' });

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

Проксированные события

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

Примечание Для предотвращения конфликтов Behavior не вызывает события уничтожения при собственном уничтожении. Событие destroy, происходящее на Behavior , будет происходить от связанного представления.

События области

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

Класс Region также вызывает События уничтожения.

show и before:show события

Эти события срабатывают до (before:show) и после (show) отображения чего-либо в области. Представление может быть или не быть отображено во время before:show, но представление будет отображено show.

События show получат экземпляр области, отображаемое представление и любые параметры, переданные в region.show.

import { Region, View } from 'backbone.marionette';

const MyRegion = Region.extend({
  onBeforeShow(myRegion, view, options) {
    console.log(myRegion.hasView()); //false
    console.log(view.isRendered()); // false
    console.log(options.foo === 'bar'); // true
  },
  onShow(myRegion, view, options) {
    console.log(myRegion.hasView()); //true
    console.log(view.isRendered()); // true
    console.log(options.foo === 'bar'); // true
  }
});

const MyView = View.extend({
  template: _.template('hello')
});

const myRegion = new MyRegion({ el: '#dom-hook' });

myRegion.show(new MyView(), { foo: 'bar' });

empty и before:empty события

Эти события срабатывают до (before:empty) и после (empty) очистки представления области. Эти события не будут срабатывать, если в области нет представления, даже если область отсоединяет DOM изнутри области el. Представление не будет отсоединено или уничтожено во время before:empty, но будет отсоединено или уничтожено во время empty.

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

import { Region, View } from 'backbone.marionette';

const MyRegion = Region.extend({
  onBeforeEmpty(myRegion, view) {
    console.log(myRegion.hasView()); //true
    console.log(view.isDestroyed()); // false
  },
  onEmpty(myRegion, view) {
    console.log(myRegion.hasView()); //false
    console.log(view.isDestroyed()); // true
  }
});

const MyView = View.extend({
  template: _.template('hello')
});

const myRegion = new MyRegion({ el: '#dom-hook' });

myRegion.empty(); // no events, no view emptied

myRegion.show(new MyView());

myRegion.empty();

События MnObject

Класс MnObject вызывает События уничтожения.

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

add:region и before:add:region события

Эти события срабатывают до (before:add:region) и после (add:region) добавления области в представление. Обработчик события получит экземпляр представления, имя области в виде строки и экземпляр области в качестве аргументов события. Область полностью инициализирована для обоих событий.

remove:region и before:remove:region события

Эти события срабатывают до (before:remove:region) и после (remove:region) удаления области из представления. Обработчик события получит экземпляр представления, имя области в виде строки и экземпляр области в качестве аргументов события. Область не будет уничтожена в событии before, но уничтожается remove:region.

Примечание В настоящее время эти события вызываются только с помощью API view.removeRegion, а не при непосредственном уничтожении области. https://github.com/marionettejs/backbone.marionette/issues/3602

События CollectionView

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

add:child и before:add:child события

Эти события срабатывают до (before:add:child) и после (add:child) создания каждого дочернего представления и его добавления в children. Они будут вызваны один раз для каждого элемента в прикреплённой коллекции или для любого добавленного представления с помощью addChildView.

remove:child и before:remove:child события

Эти события срабатывают до (before:remove:child) и после (remove:child) удаления каждого дочернего представления из children. Представление может быть удалено из children при его уничтожении, удалении из collection или удалении с помощью removeChildView.

ПРИМЕЧАНИЕ Дочернее представление может быть или не быть уничтожено к этому моменту.

ПРИМЕЧАНИЕ Когда CollectionView уничтожается, оно не удаляет индивидуально свои children. Каждое дочернее представление будет уничтожено, но любая необходимая очистка во время уничтожения CollectionView должна выполняться в before:destroy:children.

sort и before:sort события

Эти события срабатывают до (before:sort) и после (sort) сортировки дочерних элементов в CollectionView. Эти события будут вызваны только если имеются children и viewComparator.

filter и before:filter события

Эти события срабатывают до (before:filter) и после (filter) фильтрации дочерних элементов в CollectionView. Это событие будет вызываться только если имеются children и viewFilter.

Когда вызывается событие filter, отфильтрованные дочерние элементы уже были отделены от el представления, но новые дочерние элементы ещё не были отображены. Событие filter не только получает экземпляр представления, но также массивы прикреплённых и откреплённых представлений.

const MyCollectionView = CollectionView.extend({
  onBeforeFilter(myCollectionView) {
   console.log('Nothing has changed yet!');
  },
  onFilter(myCollectionView, attachViews, detachedView) {
    console.log('Array of attached views', attachedView);
    console.log('Array of detached views', attachedView);
  }
});

render:children и before:render:children события

Аналогично Region show и before:show событиям эти события срабатывают до (before:render:children) и после (render:children) отображения children CollectionView прикрепляются к CollectionView el или childViewContainer.

Эти события получат экземпляр CollectionView, и массив отображаемых представлений. Представления в массиве могут быть или не быть отображены или прикреплены к before:render:children, но будут отображены и прикреплены к render:children.

Если CollectionView может определить, что добавленные представления будут добавлены только в конец, в событие будут переданы только добавленные представления. В противном случае будут переданы все children представления.

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

destroy:children и before:destroy:children события

Эти события срабатывают перед (before:destroy:children) и после (destroy:children) уничтожения дочерних элементов в CollectionView. Эти события будут срабатывать только в том случае, если есть children.

События области представления пустого элемента CollectionView

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

import { CollectionView } from 'backbone.marionette';

const MyView = CollectionView.extend({
  emptyView: MyEmptyView
});

const myView = new MyView();

myView.getEmptyRegion().on({
  'show'() {
    console.log('CollectionView is empty!');
  },
  'before:empty'() {
    if (this.hasView()) {
      console.log('CollectionView is removing the emptyView');
    }
  }
});

myView.render();

События изменения DOM

render и before:render события

Отражает, когда шаблон представления рендерится в его el.

before:render произойдёт до удаления текущих дочерних представлений. render — это идеальное событие для присоединения дочерних представлений к шаблону представления, так как первое рендерирование обычно происходит до присоединения представления к DOM.

import { View, CollectionView } from 'backbone.marionette';
import MyChildView from './MyChildView';

const MyView = View.extend({
  template: _.template('<div class="foo-region"></div>'),
  regions: {
    'foo': '.foo-region'
  },
  onRender() {
    this.showChildView('foo', new MyChildView());
  }
});

const MyCollectionView = CollectionView.extend({
  childView: MyChildView,
  onRender() {
    // Add a child not from the `collection`
    this.addChildView(new MyChildView());
  }
})

Примечание Это событие срабатывает только при рендеринге шаблона в представление. У представления, которое предварительно отрисовано, это событие не будет срабатывать, если оно не перерендерится. Предварительно рендеренные представления должны использовать initialize для присоединения дочерних представлений и событие render , если представление перерендеривается.

Примечание Если template представления установлено в false, это событие не будет срабатывать.

attach и before:attach события

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

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

detach и before:detach события

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

before:detach — это идеальное событие для очистки внешних обработчиков DOM, таких как плагины jQuery, использующие el представления, но не его содержимое.

dom:refresh событие

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

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

ПРИМЕЧАНИЕ Это событие не будет срабатывать, если у представления нет шаблона для рендеринга, если только оно не содержит предварительно рендеренный HTML.

dom:remove событие

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

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

ПРИМЕЧАНИЕ Это событие не будет срабатывать, если у представления нет шаблона для рендеринга, если только оно не содержит предварительно рендеренный HTML.

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

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

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

import { View } from 'backbone.marionette';

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

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

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

destroy и before:destroy события

Каждый класс имеет метод destroy, который можно использовать для очистки экземпляра. За исключением Behavior, каждый из этих методов вызывает событие before:destroy и destroy.

Как правило, onBeforeDestroy является лучшим обработчиком для очистки, так как экземпляр и любые созданные внутри дочерние элементы уже уничтожаются к тому времени, когда вызывается onDestroy.

Примечание Для представлений это не идеальное место для очистки чего-либо, затрагивающего DOM. См. dom:remove или [before:detach] для очистки, связанной с DOM.

import { Application, View } from 'backbone.marionette';

const MyView = View.extend({
  onBeforeDestroy(options) {
    console.log(options.foo);
  }
});

const myView = new MyView();

mvView.destroy({ foo: 'destroy view' });

const MyApp = Application.extend({
  onBeforeDestroy(options) {
    console.log(options.foo);
  }
});

const myApp = new MyApp();

myApp.destroy({ foo: 'destroy app' });

CollectionView destroy:children и before:destroy:children события

Подобно destroy, CollectionView имеет события для того, когда все его дочерние элементы уничтожены. Подробности см. в событиях CollectionView.

Поддержка представлений Backbone

Marionette.Events и triggerMethod

Внутри Marionette использует triggerMethod для вызова событий. Этот API недоступен для Backbone.View , поэтому для поддержки Backbone.View в Marionette v4+ Marionette.Events необходимо смешать в представление, которое не является Marionette.

Это можно сделать для отдельного определения представления:

import { Events } from 'backbone.marionette';

const MyBbView = Backbone.View.extend(Events);

или для всех Backbone.View

_.extend(Backbone.View.prototype, Events);

События жизненного цикла

render и destroy

Для поддержки представлений, не являющихся Marionette, Marionette использует два флага, чтобы определить, следует ли вызывать render и destroy события на представлении. Если пользовательское представление вызывает свои render или destroy события, соответствующий флаг должен быть установлен в true , чтобы избежать дублирования этих событий Marionette.

// Add support for triggerMethod
import { Events } from 'backbone.marionette';

_.extend(Backbone.View.prototype, Events);

const MyCustomView = Backbone.View.extend({
  supportsRenderLifecycle: true,
  supportsDestroyLifecycle: true,
  render() {
    this.triggerMethod('before:render');

    this.$el.html('render html');

    // Since render is being triggered here set the
    // supportsRenderLifecycle flag to true to avoid duplication
    this.triggerMethod('render');
  },
  destroy() {
    this.triggerMethod('before:destroy');

    this.remove();

    // Since destroy is being triggered here set the
    // supportsDestroyLifecycle flag to true to avoid duplication
    this.triggerMethod('destroy');
  }
});

События жизненного цикла изменения DOM

Как упоминалось в Дополнительных настройках событий, некоторые события DOM вызываются из монитора событий представления, который будет обрабатывать события, связанные с прикреплением DOM, по дереву представления. Представления Backbone не будут иметь функциональности, если монитор не добавлен. Это будет включать все События изменения DOM кроме рендеринга.

Вы можете добавить монитор событий представления к любому представлению, не являющемуся Marionette:

import { monitorViewEvents, Events } from 'backbone.marionette';

// Add support for triggerMethod
_.extend(Backbone.View.prototype, Events);

const MyCustomView = Backbone.View.extend({
  initialize() {
    monitorViewEvents(this);
    // Ideally this happens first prior to any rendering
    // or attaching that might occur in the initialize
  }
});

© 2017 Muted Solutions, LLC
Licensed under the MIT License.
https://marionettejs.com/docs/v4.0.0/events.class.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API