Marionette.Поведение

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

Behavior включает:

• Общие функции Marionette
• События класса
• Взаимодействия с DOM
• События сущности

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

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

• Создание экземпляра поведения
• Использование поведений
  • Определение и присоединение поведений
  • Параметры поведения
• Вложение поведений
• view поведения
• Провайдер представления
  • Прослушивание событий представления
  • Обработчики провайдеров
  • События / Порядок инициализации
  • Использование ui
  • Провайдеры DOM представления
• Удаление поведения

Создание экземпляра поведения

В отличие от других классов Marionette, Behavior не предназначены для создания экземпляров, кроме как через представление.

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

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

import { View } from 'backbone.marionette';

const MyView = View.extend({
  ui: {
    destroy: '.destroy-btn'
  },

  events: {
    'click @ui.destroy': 'warnBeforeDestroy'
  },

  warnBeforeDestroy() {
    alert('You are about to destroy all your data!');
    this.destroy();
  },

  onRender() {
    this.ui.destroy.tooltip({
      text: 'What a nice mouse you have.'
    });
  }
});

Пример вживую

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

Определение и присоединение поведений

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

const DestroyWarn = Behavior.extend({
  // You can set default options
  // They will be overridden if you pass in an option with the same key.
  options: {
    message: 'You are destroying!'
  },

  ui: {
    destroy: '.destroy-btn'
  },

  // Behaviors have events that are bound to the views DOM.
  events: {
    'click @ui.destroy': 'warnBeforeDestroy'
  },

  warnBeforeDestroy() {
    const message = this.getOption('message');
    window.alert(message);
    // Every Behavior has a hook into the
    // view that it is attached to.
    this.view.destroy();
  }
});

const ToolTip = Behavior.extend({
  options: {
    text: 'Tooltip text'
  },

  ui: {
    tooltip: '.tooltip'
  },

  onRender() {
    this.ui.tooltip.tooltip({
      text: this.getOption('text')
    });
  }
});

const MyView = View.extend({
  behaviors: [DestroyWarn, ToolTip]
});

Пример вживую

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

const MyView = View.extend({
  behaviors: {
    destroy: DestroyWarn,
    tooltip: ToolTip
  }
});

Параметры поведения

При присоединении поведений к представлениям мы также можем передавать параметры для добавления к поведению. Это, как правило, статическая информация, относящаяся к тому, что должно делать поведение. В нашем приведенном выше примере мы хотим переопределить сообщение для наших поведений DestroyWarn и Tooltip, чтобы они соответствовали исходному сообщению в представлении:

const MyView = View.extend({
  behaviors: [
    {
      behaviorClass: DestroyWarn,
      message: 'You are about to destroy all your data!'
    },
    {
      behaviorClass: ToolTip,
      text: 'What a nice mouse you have.'
    }
  ]
});

Пример вживую

Существует несколько свойств, которые, если они будут переданы, будут присоединены непосредственно к экземпляру: collectionEvents, events, modelEvents, triggers, ui

Используя объект, мы должны определить атрибут behaviorClass для ссылки на наши поведения, а затем добавить любые дополнительные параметры с ключами, соответствующими параметру, который мы хотим переопределить. Любые переданные параметры переопределят значения из свойства options.

Ошибки Будет выброшено исключение, если класс Behavior не передан.

Вложение поведений

Помимо расширения View с помощью Behavior, само Behavior может использовать другие поведения. Синтаксис идентичен синтаксису, используемому для View:

import { Behavior } from 'backbone.marionette';

const Modal = Behavior.extend({
  behaviors: [
    {
      behaviorClass: DestroyWarn,
      message: 'Whoa! You sure about this?'
    }
  ]
});

Пример вживую

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

view поведения

view — это ссылка на экземпляр View, к которому прикреплено Behavior.

import { Behavior } from 'backbone.marionette';

Behavior.extend({
  handleDestroyClick() {
    this.view.destroy();
  }
});

Пример вживую

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

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

Прослушивание событий представления

Поведения поддерживаются провайдером событий. Это означает, что любые события, которые вызываются в View , передаются всем прикрепленным behaviors. Это включает:

• События, вызываемые triggerMethod
• События, вызываемые от triggers
• События, вызываемые childViewTriggers
• События, вызываемые от childView

Эти обработчики работают точно так же, как и в View — см. документацию View

По умолчанию все события, вызываемые в поведении, исходят от представления или сущностей представления. События, вызываемые в экземпляре поведения, не выполняются в представлении. Для уведомления представления поведение должно вызвать событие в свойстве своего представления, например, this.view.trigger('my:event')

Обработчики провайдеров

Поведения предоставляют провайдеры для ряда атрибутов обработки событий представления, включая:

• events
• triggers
• modelEvents
• collectionEvents

import { Behavior } from 'backbone.marionette';

Behavior.extend({
  events: {
    'click .foo-button': 'onClickFooButton'
  },
  triggers: {
    'click .bar-button': 'click:barButton'
  },
  modelEvents: {
    'change': 'onChangeModel'
  },
  collectionEvents: {
    'change': 'onChangeCollection'
  },
  onClickFooButton(evt) {
    // ..
  },
  onClickBarButton(view, evt) {
    // ..
  },
  onChangeModel(model, opts) {
    // ..
  },
  onChangeCollection(model, opts) {
    // ..
  }
});

События / Порядок инициализации

Если и представление, и поведение прослушивают одно и то же событие, оно будет выполнено сначала в представлении, а затем в поведении, как показано ниже.

Процесс инициализации представления + поведения выглядит следующим образом:

1. Создается представление
2. Создается поведение
3. Поведение инициализируется со свойством представления
4. Инициализируется представление
5. Представление вызывает событие initialize в поведении.

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

Пример вживую

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

Как и в представлениях, events и triggers могут использовать ссылки ui в своих обработчиках. Дополнительные сведения см. в ui документации. Эти ссылки можно определить в поведении или представлении:

import { Behavior } from 'backbone.marionette';

const MyBehavior = Behavior.extend({
  ui: {
    saveForm: '.btn-save'
  },

  events: {
    'click @ui.saveForm': 'saveForm'
  },

  modelEvents: {
    invalid: 'showError'
  },

  saveForm() {
    this.view.model.save();
  },

  showError() {
    alert('You have errors');
  }
});

Пример вживую

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

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

const MyBehavior = Behavior.extend({
  ui: {
    saveForm: '.btn-save'
  },

  events: {
    'click @ui.saveForm': 'saveForm'  // .btn-primary when used with `FirstView`
  },

  saveForm() {
    this.view.model.save();
  }
});

const FirstView = View.extend({
  behaviors: [MyBehavior],

  ui: {
    saveForm: '.btn-primary'
  },

  events: {
    'click @ui.saveForm': 'checkForm'  // .btn-primary
  },

  checkForm() {
    // ...
  }
});

Провайдеры DOM представления

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

• $
• el
• $el

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

import { Behavior } from 'backbone.marionette';

const ViewBehavior = Behavior.extend({
  onRender() {
    const shouldHighlight = this.view.model.get('selected');
    this.$el.toggleClass('highlight', shouldHighlight);
    this.$('.view-class').addClass('highlighted-icon');
  }
});

Пример вживую

Примечание в редких случаях, когда модифицируется el представления через setElement , если используются эти провайдеры, их необходимо вручную обновить, вызвав myBehavior.proxyViewProperties();

Удаление поведения

myBehavior.destroy() вызовет stopListening в экземпляре поведения и удалит поведение из представления.