Общие возможности Marionette

В Marionette есть несколько методов, общих для всех классов.

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

initialize
extend
API событий
triggerMethod
bindEvents
unbindEvents
bindRequests
unbindRequests
normalizeMethods
getOption
mergeOptions
Свойство options

`initialize`

Как и классы Backbone, initialize — это метод, который можно определить в любом классе Marionette. Он вызывается при создании экземпляра класса и получает все аргументы, переданные при создании. Первый аргумент может содержать опции, которые класс прикрепляет к экземпляру.

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  initialize(options, arg2) {
    console.log(options.foo, this.getOption('foo'), arg2);
  }
});

const myObject = new MyObject({ foo: 'bar' }, 'baz'); // logs "bar" "bar" "baz"

Пример работы

`extend`

Заимствованный из Backbone, extend доступен для всех определений классов для наследования на основе классов

API событий

API событий Backbone.Events доступен для всех классов. Каждый класс Marionette может как listenTo любой объект с этим API, так и иметь события, срабатывающие на экземпляре.

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

`triggerMethod`

Вызывает событие и соответствующий метод на объекте. Это то же самое, что и Backbone's trigger, но с дополнительным обработчиком метода.

При срабатывании события, первая буква каждого раздела имени события капитализируется, и перед ним добавляется слово "on". Примеры:

triggerMethod('foo') вызывает функцию "onFoo"
triggerMethod('before:foo') вызывает функцию "onBeforeFoo"

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

triggerMethod('foo', bar) вызовет onFoo(bar){...})

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  initialize(){
    this.triggerMethod('foo', 'baz');
  },
  onFoo(bar){
    console.log(bar);
  }
});

const myObj = new MyObject(); // console.log "baz"

myObj.triggerMethod('foo', 'qux'); // console.log "qux"

Дополнительную информацию о triggerMethod можно найти в документации по событиям Marionette.

`bindEvents`

Этот метод используется для связывания любого объекта, работающего с Backbone.Events API. Это включает все классы Backbone, классы Marionette и каналы Radio.

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  fooEvents: {
    'change:foo': 'doSomething'
  },
  initialize(){
    this.fooChannel = Radio.channel('foo');
    this.bindEvents(this.fooChannel, this.fooEvents);
  },
  doSomething(){
    // the "change:foo" event was fired from the radio channel
    // respond to it appropriately, here.
  }
});

Пример работы

Первый параметр — это entity (Backbone.Model, Backbone.Collection или любой объект, в котором смешан Backbone.Events), от которого связываются события.

Второй параметр — хеш { 'event:name': 'eventHandler' } конфигурации. Вместо имени функции можно указать функцию.

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

`unbindEvents`

Этот метод используется для отвязки любого объекта, работающего с Backbone.Events API. Это включает все классы Backbone, классы Marionette и каналы Radio.

Вызов этого метода без хеша событий отвяжет все события от канала.

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  fooEvents: {
    'change:foo': 'onChangeFoo',
    'stop': 'onStop'
  },
  initialize(){
    this.fooChannel = Radio.channel('foo');
    this.bindEvents(this.fooChannel, this.fooEvents);
  },
  onChangeFoo(){
    // the "change:foo" event was fired from the radio channel
    // respond to it appropriately, here.

    // Doing something
    this.listenTo(this.fooChannel, 'adhoc', this.render);
  },
  onStop() {
    // Removes all fooEvents
    this.unbindEvents(this.fooChannel, this.fooEvents);

    // Removes all bound fooChannel events including `adhoc`
    this.unbindEvents(this.fooChannel);
  }
});

Первый параметр — entity (Backbone.Model, Backbone.Collection или любой объект, в котором смешан Backbone.Events), от которого отвязываются события.

Второй параметр — хеш { 'event:name': 'eventHandler' } конфигурации. Вместо имени функции можно указать функцию. Если второй параметр не указан, удаляются все обработчики.

Пример работы

`bindRequests`

Этот метод используется для связывания любого объекта, работающего с Backbone.Radio API запросов. Это включает каналы Radio.

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  channelName: 'myChannelName',
  radioRequests: {
    'foo:bar': 'doFooBar'
  },
  initialize() {
    const channel = Radio.channel(this.channelName);
    this.bindRequests(channel, this.radioRequests);
  },
  doFooBar() {
    console.log('foo:bar');
    return 'bar';
  }
 });

const myView = new MyView();
const channel = Radio.channel('myChannelName');
channel.request('foo:bar'); // Logs 'foo:bar' and returns 'bar'

Пример работы

Первый параметр, channel, — экземпляр из Radio.

Второй параметр — хеш { 'request:name': 'replyHandler' } конфигурации. Вместо имени функции можно указать функцию.

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

`unbindRequests`

Этот метод используется для отвязки любого объекта, работающего с Backbone.Radio API запросов.

Вызов этого метода без хеша радио запросов отвяжет все запросы от канала.

ПРИМЕЧАНИЕ: Для предотвращения утечек памяти, unbindRequests следует вызывать в или до onBeforeDestroy.

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  channelName: 'myChannelName',
  radioRequests: {
    'foo:bar': 'doFooBar'
  },
  onAttach() {
    const channel = Radio.channel(this.channelName);
    this.bindRequests(channel, this.radioRequests);
  },
  onBeforeDetach() {
    const channel = Radio.channel(this.channelName);
    this.unbindRequests(channel, this.radioRequests);
  }
 });

Примеры работы

Первый параметр, channel, — экземпляр из Radio.

Второй параметр — хеш { 'request:name': 'replyHandler' } конфигурации. Вместо имени функции можно указать функцию. Если второй параметр не указан, все обработчики удаляются.

`normalizeMethods`

Принимает хеш имён событий и функций (или имён функций) и возвращает тот же хеш, но с именами функций, заменёнными на сами функции.

import { View } from 'backbone.marionette';

const MyView = View.extend({
  initialize() {
    const hash = {
      'action:one': 'handleActionOne', // This will become a reference to `this.handleActionOne`
      'action:two': this.handleActionTwo
    };

    this.normalizedHash = this.normalizeMethods(hash);
  },

  do(action) {
    this.normalizedHash[action]();
  },

  handleActionOne() {
    console.log('action:one was fired');
  },

  handleActionTwo() {
    console.log('action:two was fired');
  }

});

const myView = new MyView();
myView.do('action:one');
myView.do('action:two');

Пример работы

`getOption`

Для доступа к опции используется метод getOption. getOption обращается к значению с тем же именем, определённым в экземпляре, если оно не определено в опциях.

import { View } from 'backbone.marionette';

const View = View.extend({
  classVal: 'class value',
  initialize(){
    this.instanceVal = 'instance value'
  }
});

const view = new View({ optVal: 'option value' });

view.getOption('instanceVal'); // instance value
view.getOption('classVal'); // class value
view.getOption('optVal'); // option value

const view2 = new View({ instanceVal: 'foo', classVal: 'bar', optVal: 'baz' });

view.getOption('instanceVal'); // foo
view.getOption('classVal'); // bar
view.getOption('optVal'); // baz

Пример работы

Ложные значения

Функция getOption возвращает любое ложное значение из options, кроме undefined. Если у объекта опции есть неопределённое значение, он попытается прочитать значение непосредственно из объекта.

Например:

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  foo: 'bar',

  initialize() {
    console.log(this.getOption('foo'));
  }
});

const model1 = new MyObject(); // => "bar"

const myObj = {};
console.log(myObj.foo); // undefined
const model2 = new MyObject({ foo: myObj.foo }); // => "bar"

Пример работы

В этом примере возвращается "bar" в обоих случаях, так как во втором примере значение f неопределено.

`mergeOptions`

Метод mergeOptions принимает два аргумента: объект options и объект keys для извлечения значений из объекта опций. Любые соответствующие keys объединяются с экземпляром класса. Например:

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  initialize(options) {
    this.mergeOptions(options, ['model', 'something']);
    // this.model and this.something will now be available
  }
});

const myObject = new MyObject({
  model: new Backbone.Model(),
  something: 'test',
  another: 'value'
});

console.log(myObject.model);
console.log(myObject.something);
console.log(myObject.getOption('another'));

Пример работы

В этом примере model и something напрямую доступны в экземпляре MyObject, тогда как another доступен через getOption. Это удобно, когда вы хотите добавить дополнительные ключи, которые будут часто использоваться в определённом классе.

Свойство `options`

Классы Marionette принимают свойство options в определении класса, которое объединяется с аргументом options, переданным при создании экземпляра. Значения из переданного аргумента options переопределяют значения свойства.

Аргумент options передаваемый в метод initialize равен переданному при создании класса. Для получения опции внутри initialize, учитывая свойство options, необходимо использовать getOption

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  options: {
    foo: 'bar',
    another: 'thing'
  },

  initialize(options) {
    console.log(options.foo) // undefined
    console.log(this.getOption('foo')) // 'bar'
    console.log(this.getOption('another')) // 'value'
  }
});

const myObject = new MyObject({
  another: 'value'
});

Классы Marionette

Marionette предоставляет несколько классов для построения вашей структуры представления и приложения.

Продолжить чтение....

Общие возможности Marionette

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

initialize

extend

API событий

triggerMethod

bindEvents

unbindEvents

bindRequests

unbindRequests

normalizeMethods

getOption

Ложные значения

mergeOptions

Свойство options

Классы Marionette

`initialize`

`extend`

`triggerMethod`

`bindEvents`

`unbindEvents`

`bindRequests`

`unbindRequests`

`normalizeMethods`

`getOption`

`mergeOptions`

Свойство `options`