Marionette.Application

The Application используется для моделирования приложения Marionette с единой точкой входа. Приложение предоставляет:

• Очевидную точку входа в приложение
• Четкий обработчик для глобальных событий, например, AppRouter
• Интерфейс для вставки переменных из более широкого контекста в приложение

Приложение поставляется с методом start. Его можно использовать для выполнения задач до начала остальной части приложения. Давайте рассмотрим пример:

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

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

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

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

Пример в браузере

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

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

• Основная компоновка
• Инициализация
• События приложения
• Запуск приложения
• Методы приложения

Основная компоновка

Так как Application является точкой входа в приложение, логично, что оно будет содержать ссылку на корневой элемент дерева представлений. Marionette 3 добавила это с атрибутом region и showView. Этот пример демонстрирует, как мы можем использовать это:

var Mn = require('backbone.marionette');
var RootView = require('./views/root');


var App = Mn.Application.extend({
  region: '#root-element',

  onStart: function() {
    this.showView(new RootView());
  }
});

var myApp = new App();
myApp.start();

Пример в браузере

Это немедленно отобразит RootView и запустит обычные триггеры, такие как before:attach и attach, а также триггеры before:render и render.

Инициализация

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

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

var App = Mn.Application.extend({
  initialize: function(options) {
    console.log('My value:', options.model.get('key'));
  }
});

// The application won't attach a model by default - this merely passes it into
// the options object to be, potentially, passed into views.
var app = new App({model: new Bb.Model({key: 'value'})});

Пример в браузере

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

Объект Application будет генерировать два события:

before:start

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

start

Вызывается в рамках запуска приложения. Здесь вы должны отображать свои представления и запускать Backbone.history.

Жизненный цикл приложения

Когда Application было инициализировано и вызван метод start, будет вызвана последовательность событий.

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

var MyModel = require('./mymodel');
var MyView = require('./myview');

var App = Mn.Application.extend({
  region: '#root-element',

  initialize: function(options) {
    console.log('Initialize');
  },

  onBeforeStart: function() {
    this.model = new MyModel(this.options.data);
  },

  onStart: function() {
    this.showView(new MyView({model: this.model}));
    Bb.history.start();
  }
});

var app = new App(options);
app.start();

Пример в браузере

Как мы увидим ниже, объект options передаётся в приложение в качестве аргумента в метод start.

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

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

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

var App = Mn.Application.extend({
  region: '#root-element',

  initialize: function(options) {
    console.log('Initialize');
  },

  onBeforeStart: function(app, options) {
    this.model = new MyModel(options.data);
  },

  onStart: function(app, options) {
    this.showView(new MyView({model: this.model}));
    Bb.history.start();
  }
});

var app = new App();

app.start({
  data: {
    id: 1,
    text: 'value'
  }
});

Пример в браузере

Методы приложения

Приложение Marionette предоставляет вспомогательные методы для управления прикреплённой областью.

getRegion()

Возвращает прикреплённый к приложению объект области region object.

showView(View)

Отобразить View в области, прикреплённой к приложению. Это выполняет View lifecycle.

getView()

Возвращает представление, отображаемое в прикреплённой region области приложения. Если приложение не отображает представление, этот метод возвращает undefined.

Методы Marionette.Object

Marionette.Application расширяет Marionette.Object и, таким образом, реализует тот же интерфейс метода. Обратитесь к справке Object для получения полного списка.