Взаимодействия с DOM

В дополнение к тому, что предоставляет Backbone, в Marionette есть дополнительный API для взаимодействия с DOM, доступный для всех классов представлений Marionette.

Взаимодействия с DOM в представлении Backbone.View

Представления Marionette расширяют Backbone.View и поэтому имеют ссылки на el, $el, и this.$() представления, а также определяют хеш events.

Эти методы предоставляют способы взаимодействия с представлением, ограниченным его el и всеми дочерними элементами представления. Для уточнения, events и this.$() будут запросить шаблон представления и все дочерние элементы. Добавленные интерфейсы Marionette пытаются ограничить взаимодействия только шаблоном представления, оставляя дочерние элементы для самостоятельного обработки.

Привязка к пользовательскому вводу

Представления могут привязывать пользовательские события всякий раз, когда пользователи выполняют какие-либо действия с DOM. Используя обработчики представления events и triggers, мы можем либо напрямую привязать пользовательский ввод к действию, либо сгенерировать общее событие, которое может или не может быть обработано.

Сопоставление событий и триггеров

Атрибуты events и triggers привязывают события DOM к действиям, которые нужно выполнить в представлении. Каждый из них принимает ключевое событие DOM и сопоставление с обработчиком.

Рассмотрим простой пример:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  events: {
    'drop': 'onDrop',
    'click .btn-show-modal': 'onShowModal',
    'click @ui.save': 'onSave'
  },

  triggers: {
    'click @ui.close': 'close'
  },

  ui: {
    save: '.btn-save',
    close: '.btn-cancel'
  },

  onShowModal() {
    console.log('Show the modal');
  },

  onSave() {
    console.log('Save the form');
  },

  onDrop() {
    console.log('Handle a drop event anywhere in the element');
  }
});

Обработчики событий создаются следующим образом:

'<dom event> [dom node]': 'listener'

dom event может быть событием DOM jQuery, таким как click, или другим пользовательским событием, например, show.bs.modal Bootstrap.

dom node представляет собой селектор jQuery или ключевое слово ui , префикс которого @.. dom node необязательно, и если оно опущено, будет использован селектор представления $el. Дополнительную информацию об объекте ui и о его работе см. в документации по ui.

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

Атрибут представления events привязывает события DOM к функциям или методам представления. Самый простой вариант — сделать ссылку на метод в представлении:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  events: {
    'click a': 'onShowModal'
  },

  onShowModal(event) {
    console.log('Show the modal');
  }
});

Пример

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

При передаче ссылки на метод, метод должен существовать в представлении.

Атрибут events также может напрямую привязывать функции:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  events: {
    'click a'(event) {
      console.log('Show the modal');
    }
  }
});

Пример

Как и при передаче строковой ссылки на метод представления, атрибут events передает event в качестве аргумента вызываемой функции.

Примечание События Backbone events делегируются в el представления. Это означает, что события с селектором узла DOM будут обрабатываться для представления и его потомков. Если вы добавите дочерний элемент с тем же селектором, что и у обработчика событий родителя, родительский обработчик обработает событие для обоих представлений.

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

Атрибут представления triggers привязывает события DOM к событиям Marionette, на которые можно реагировать на уровне представления или родительского уровня. Дополнительную информацию о событиях см. в документации по событиям. В этом разделе будет показано, как привязать эти события к представлениям.

import { View } from 'backbone.marionette';

const MyView = View.extend({
  triggers: {
    'click a': 'click:link'
  },

  onClickLink(view, event) {
    console.log('Show the modal');
  }
});

Пример

При нажатии на тег a здесь срабатывает событие link:click. На это событие можно подписаться, используя метод onEvent привязки, описанный в документации по событиям.

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

Объект события представления triggers

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

ПРИМЕЧАНИЕ Сильно рекомендуется, чтобы представления обрабатывали свои собственные объекты событий DOM. Не следует использовать объекты событий DOM в внешних обработчиках.

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

import { View } from 'backbone.marionette';

const MyView = View.extend({
  triggers: {
    'click a': {
      event: 'link:clicked',
      preventDefault: true, // this param is optional and will default to true
      stopPropagation: false
    }
  }
});

Поведение по умолчанию при вызове preventDefault можно изменить с помощью флага функции triggersPreventDefault, а stopPropagation с помощью флага функции triggersStopPropagation.

Организация вашего представления

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

1. Предоставление одной определенной ссылки на часто используемые элементы пользовательского интерфейса
2. Кэширование селектора jQuery
3. Запрос только из шаблона представления, а не из дочерних элементов

Определение ui

Для определения вашего хеша ui просто установите объект именованных селекторов jQuery в атрибут ui вашего представления:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  template: MyTemplate,
  ui: {
    save: '#save-button',
    close: '.close-button'
  }
});

Внутри вашего представления ссылки save и close будут указывать на селекторы jQuery #save-button и .close-button соответственно, найденные только в отрисованном MyTemplate.

Доступ к элементам пользовательского интерфейса

Чтобы получить доступ к элементам пользовательского интерфейса, используйте метод getUI(ui):

import { View } from 'backbone.marionette';

const MyView = View.extend({
  template: MyTemplate,
  ui: {
    save: '#save-button',
    close: '.close-button'
  },

  onFooEvent() {
    const $saveButton = this.getUI('save');
    $saveButton.addClass('disabled');
    $saveButton.attr('disabled', 'disabled');
  }
});

Пример

Поскольку $saveButton здесь представляет собой селектор jQuery, вы можете вызывать любые методы jQuery, согласно документации jQuery.

Ссылка на пользовательский интерфейс в events и triggers

Атрибут UI особенно полезен при установке обработчиков в объектах events и triggers — просто используйте префикс @ui.:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  template: MyTemplate,
  ui: {
    save: '#save-button',
    close: '.close-button'
  },

  events: {
    'click @ui.save': 'onSave'
  },

  triggers: {
    'click @ui.close': 'close'
  },

  onSave() {
    this.model.save();
  }
});

Пример

В этом примере, при нажатии на #save-button, будет вызван onSave. Если пользователь нажмёт на .close-button, то событие close:view будет вызвано в MyView.

Используя префикс @ui, мы можем изменить подлежащий шаблон, не проходя по всему представлению, где ссылаются на этот селектор — просто обновите объект ui.