Marionette.Приложение

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

Создавая Приложение, вы получаете три важные вещи:

Метод start для запуска вашего приложения. Это предоставляет вам возможность выполнить действия, которые могут потребоваться перед, скажем, началом маршрутизации. Примером может быть выполнение вызова AJAX для запроса данных, необходимых вашему приложению, перед запуском.
Пространство имён для хранения вещей вне window. Если вы не используете загрузчик модулей, такой как ES6 модули, CommonJS или AMD, то вы можете использовать Приложение для хранения ваших объектов JavaScript. А если вы используете одну из этих систем модулей, то вы всё равно можете прикреплять вещи к приложению для помощи в отладке.
Интеграция с инспектором Marionette. Инспектор Marionette — замечательный инструмент, который упрощает понимание и отладку вашего приложения. Использование класса Приложение автоматически подключит ваше приложение к этому расширению.

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

Начало работы

В приложениях Backbone часто используется следующий шаблон:

var app = {};

Наиболее заметным примером этого шаблона является исходный код DocumentCloud. DocumentCloud примечателен тем, что это базовая кодовая база, из которой был абстрагирован Backbone. Если бы существовал такой концепт, как идеальное приложение Backbone, то это приложение наверняка было бы кандидатом.

Шаблон создания объекта JavaScript настолько популярен, потому что он предоставляет вам место для размещения элементов вашего приложения. Например, прикрепление маршрутизатора к этому объекту — распространённая практика.

Использование простого объекта JavaScript хорошо, но Marionette предоставляет лёгкую оболочку для простого объекта JavaScript — Приложение. Одно преимущество использования Приложения в том, что оно поставляется с методом start. Это можно использовать для выполнения задач перед началом остальной части вашего приложения. Давайте посмотрим на пример:

// Create our Application
var app = new Mn.Application();

// Start history when our application is ready
app.on('start', function() {
  Backbone.history.start();
});

// Load some initial data, and then start our application
loadInitialData().then(app.start);

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

Initialize

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

var app = Marionette.Application.extend({
  initialize: function(options) {
    console.log('My container:', options.container);
  }
});

// Although applications will not do anything
// with a `container` option out-of-the-box, you
// could build an Application Class that does use
// such an option.
var app = new app({container: '#app'});

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

Объект Application поднимает несколько событий в течение своего жизненного цикла, используя функцию Marionette.triggerMethod. Эти события можно использовать для выполнения дополнительных обработок вашего приложения. Например, вы можете предварительно обработать некоторые данные непосредственно перед инициализацией. Или вы можете подождать, пока всё приложение будет инициализировано, чтобы начать Backbone.history.

В настоящее время срабатывают следующие события:

"before:start" / onBeforeStart: срабатывает непосредственно перед запуском Application и перед выполнением инициализаторов.
"start" / onStart: срабатывает после запуска Application и после выполнения инициализаторов.

MyApp.on("before:start", function(options){
  options.moreData = "Yo dawg, I heard you like options so I put some options in your options!";
});

MyApp.on("start", function(options){
  if (Backbone.history){
    Backbone.history.start();
  }
});

Параметр options передаётся через метод start объекта приложения (см. ниже).

Запуск приложения

После настройки приложения вы можете запустить всё, вызвав: MyApp.start(options).

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

var options = {
  something: "some value",
  another: "#some-selector"
};

MyApp.start(options);

Области приложения

Предупреждение: устарело Эта функция устарела. Вместо использования Приложения в качестве корня дерева представлений, вы должны использовать представление макета. Чтобы ограничить своё представление макета всем документом, можно установить его el в 'body'. Это может выглядеть примерно так:
var RootView = Marionette.LayoutView.extend({
  el: 'body'
});
Позже вы можете прикрепить экземпляр RootView к экземпляру вашего Приложения.
app.rootView = new RootView();

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

Вы можете создать области через метод addRegions, передав объект-литерал или функцию, которая возвращает объект-литерал.

Существует три синтаксических формы для добавления области к объекту приложения.

Селектор jQuery

Первая — указать селектор jQuery в качестве значения определения области. Это создаст экземпляр Marionette.Region непосредственно и назначит его селектору:

MyApp.addRegions({
  someRegion: "#some-div",
  anotherRegion: "#another-div"
});

Пользовательский класс области

Вторая — указать пользовательский класс области, где класс области уже указал селектор:

var MyCustomRegion = Marionette.Region.extend({
  el: "#foo"
});

MyApp.addRegions(function() {
  return {
    someRegion: MyCustomRegion
  };
});

Пользовательский класс области и селектор

Третий метод — указать пользовательский класс области и селектор jQuery для этого экземпляра области, используя объект-литерал:

var MyCustomRegion = Marionette.Region.extend({});

MyApp.addRegions({

  someRegion: {
    selector: "#foo",
    regionClass: MyCustomRegion
  },

  anotherRegion: {
    selector: "#bar",
    regionClass: MyCustomRegion
  }

});

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

Вы также можете указать области для каждого экземпляра Application.

new Marionette.Application({
  regions: {
    fooRegion: '#foo-region'
  }
});

Переопределение менеджера областей по умолчанию

Если вам нужен класс RegionManager динамически выбранный, укажите getRegionManager:

Marionette.Application.extend({
  // ...

  getRegionManager: function() {
    // custom logic
    return new MyRegionManager();
  }

Это может быть полезно, если вы хотите прикрепить области Application к своему экземпляру RegionManager.

Получение области по имени

Область может быть получена по имени, используя метод getRegion:

var app = new Marionette.Application();
app.addRegions({ r1: "#region1" });

var myRegion = app.getRegion('r1');

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

Удаление областей

Области также можно удалить с помощью метода removeRegion, передав имя области для удаления в качестве строкового значения:

MyApp.removeRegion('someRegion');

Удаление области должным образом очистит её перед удалением из объекта приложения.

Дополнительную информацию об областях см. в документации по областям. Также API, который приложения используют для управления областями, происходит от класса RegionManager, который описан здесь.

Application.mergeOptions

Слияние ключей из объекта options напрямую в экземпляр Приложения.

var MyApp = Marionette.Application.extend({
  initialize: function(options) {
    this.mergeOptions(options, ['myOption']);

    console.log('The option is:', this.myOption);
  }
})

Дополнительная информация в mergeOptions

Application.getOption

Получить атрибут объекта непосредственно из объекта или из this.options, при этом this.options имеет приоритет.

Дополнительная информация в getOption

Добавление инициализаторов

Предупреждение: устарело

Эта функция устарела и запланирована к удалению в версии 3 Marionette. Вместо инициализаторов вы должны использовать события для управления логикой запуска. Событие start — идеальная замена инициализаторам.

Если вы полагались на отложенную природу инициализаторов в своём приложении, вы должны вместо этого использовать Promises. Это может выглядеть примерно так:
doAsyncThings().then(app.start);

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

MyApp.addInitializer(function(options){
  // do useful stuff here
  var myView = new MyView({
    model: options.someModel
  });
  MyApp.mainRegion.show(myView);
});

MyApp.addInitializer(function(options){
  new MyAppRouter();
  Backbone.history.start();
});

Эти обработчики будут выполнены при запуске вашего приложения и привязаны к объекту приложения как контекст для обработчика. Другими словами, this — это объект MyApp внутри функции инициализатора.

Аргумент options передаётся методом start (см. ниже).

Обработчики инициализации гарантированно будут выполнены, независимо от того, когда вы добавите их в объект приложения. Если вы добавите их до запуска приложения, они будут выполнены при вызове метода start. Если вы добавите их после запуска приложения, они будут выполнены немедленно.

Канал приложения

Предупреждение: устарело

Эта функция устарела и будет удалена в следующем крупном выпуске Marionette. Вместо доступа к каналам через Приложение вы должны использовать API Wreqr (или Radio). По умолчанию канал приложения называется 'global'. Чтобы получить доступ к этому каналу, вы можете использовать следующий код, в зависимости от того, используете ли вы Wreqr или Radio:
// Wreqr
var globalCh = Backbone.Wreqr.radio.channel('global');

// Radio
var globalCh = Backbone.Radio.channel('global');

Приложения Marionette поставляются с системой обмена сообщениями для облегчения коммуникации внутри вашего приложения.

Система обмена сообщениями в Приложении — канал радио из Backbone.Wreqr, который фактически состоит из трёх отдельных систем.

Приложения Marionette по умолчанию используют канал 'global', но канал можно настроить.

var MyApp = new Marionette.Application({ channelName: 'appChannel' });

В этом разделе представлен краткий обзор систем; для более глубокого изучения рекомендуется ознакомиться с Backbone.Wreqr документацией.

Агрегатор событий

Агрегатор событий доступен через свойство vent. vent он удобен для пассивного обмена информацией между частями приложения по мере возникновения событий.

var MyApp = new Marionette.Application();

// Alert the user on the 'minutePassed' event
MyApp.vent.on("minutePassed", function(someData){
  alert("Received", someData);
});

// This will emit an event with the value of window.someData every minute
window.setInterval(function() {
  MyApp.vent.trigger("minutePassed", window.someData);
}, 1000 * 60);

Запрос-ответ

Запрос-ответ — это механизм для любого компонента запросить информацию у другого компонента без тесной связи. Экземпляр Запрос-ответ доступен в приложении как свойство reqres.

var MyApp = new Marionette.Application();

// Set up a handler to return a todoList based on type
MyApp.reqres.setHandler("todoList", function(type){
  return this.todoLists[type];
});

// Make the request to get the grocery list
var groceryList = MyApp.reqres.request("todoList", "groceries");

// The request method can also be accessed directly from the application object
var groceryList = MyApp.request("todoList", "groceries");

Команды

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

Обратите внимание, что обратный вызов команды не предназначен для возврата значения.

var MyApp = new Marionette.Application();

MyApp.model = new Backbone.Model();

// Set up the handler to call fetch on the model
MyApp.commands.setHandler("fetchData", function(reset){
  MyApp.model.fetch({reset: reset});
});

// Order that the data be fetched
MyApp.commands.execute("fetchData", true);

// The execute function is also available directly from the application
MyApp.execute("fetchData", true);

Доступ к каналу приложения

Для доступа к этому каналу приложения из других объектов в приложении рекомендуется получить доступ к системам через API Wreqr, а не через экземпляр приложения.

// Assuming that we're in some class within your app,
// and that we are using the default 'global' channel
// it is preferable to access the channel like this:
var globalCh = Backbone.Wreqr.radio.channel('global');
globalCh.vent;

// This is discouraged because it assumes the name of your application
window.app.vent;

© 2016 Muted Solutions, LLC
Licensed under the MIT License.
https://marionettejs.com/docs/v2.4.7/marionette.application.html