Общие концепции Marionette

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

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

• Наследование на основе классов
  • Атрибуты со значениями
  • Функции, возвращающие значения
  • Привязка атрибутов при создании экземпляра
• Установка опций
  • Метод getOption
  • Метод mergeOptions

Наследование на основе классов

Backbone и Marionette используют функцию _.extend для имитации наследования на основе классов. Все встроенные классы, такие как Marionette.View, Marionette.Object и всё, что расширяет их, предоставляют метод extend для этой цели.

В примере ниже мы создаём новый псевдокласс MyView:

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

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

Теперь вы можете создавать экземпляры MyView с помощью ключевого слова JavaScript new:

var view = new MyView();

Атрибуты со значениями

При расширении классов мы можем задать атрибутам класса определённые значения, определив их в объекте, который передаётся в качестве параметра extend:

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

var MyView = Mn.View.extend({
  className: 'bg-success',

  template: '#template-identifier',

  regions: {
    myRegion: '.my-region'
  },

  modelEvents: {
    change: 'removeBackground'
  },

  removeBackground: function() {
    this.$el.removeClass('bg-success');
  }
});

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

При создании экземпляра MyView, каждый экземпляр получит класс .bg-success с областью myRegion в элементе .my-region.

Функции, возвращающие значения

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

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

var MyView = Mn.View.extend({
  className: function() {
    return this.model.successful() ? 'bg-success' : 'bg-error';
  },

  template: '#template-identifier',

  regions: function() {
    return {
      myRegion: '.my-region'
    };
  },

  modelEvents: function() {
    var wasSuccessful = this.model.successful();
    return {
      change: wasSuccessful ? 'removeBackground' : 'alert'
    };
  },

  removeBackground: function() {
    this.$el.removeClass('bg-success');
  },

  alert: function() {
    console.log('model changed');
  }
});

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

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

Контекст функции

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

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

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

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

var MyView = Mn.View.extend({
  template: '#template-identifier'
});

var myView = new MyView({
  triggers: {
    'click a': 'show:link'
  }
});

Это установит триггер show:link, который будет срабатывать всякий раз, когда пользователь нажмёт на <a> внутри представления.

Опции, заданные здесь, переопределят опции, заданные при определении класса. Например:

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

var MyView = Mn.View.extend({
  template: '#template-identifier',

  triggers: {
    'click @ui.save': 'save:form'
  }
});

var myView = new MyView({
  triggers: {
    'click a': 'show:link'
  }
});

В этом примере триггер для save:form больше не будет срабатывать, так как триггер для show:link полностью его переопределяет.

Установка опций

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

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

var MyView = Mn.View.extend({
  checkOption: function() {
    console.log(this.getOption('foo'));
  }
});

var view = new MyView({
  foo: 'some text'
});

view.checkOption();  // prints 'some text'

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

Метод getOption

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

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

var MyView = Mn.View.extend({
  className: function() {
    var defaultClass = this.getOption('defaultClass');
    var extraClasses = this.getOption('extraClasses');
    return [defaultClass, extraClasses].join(' ');
  },
  defaultClass: 'table'
});

var myView = new MyView({
  model: new MyModel(),
  extraClasses: 'table-striped'
});

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

Метод mergeOptions

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

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

var MyObject = Mn.Object.extend({
  initialize: function(options) {
    this.mergeOptions(options, ['model', 'something']);
    // this.model and this.something will now be available
  }
});

var 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. Это удобно, когда вы хотите добавить дополнительные ключи, которые будут активно использоваться в определённом классе.