Маршрутизатор Marionette.AppRouter

Маршрутизатор Marionette AppRouter расширяет Backbone.Router, чтобы упростить создание большого числа маршрутов для вашего приложения. Это особенно полезно, если вы хотите построить крупное одностраничное приложение, сохраняя при этом логику маршрутизатора читаемой.

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

• Использование AppRouter
• Настройка маршрутов
  • Настройка маршрутов в конструкторе
  • Добавление маршрутов во время выполнения
• Указание контроллера
  • Использование Marionette.Object
• Несколько маршрутизаторов
• История Backbone
• Обработка изменений маршрутов

Использование AppRouter

Маршрутизатор Marionette AppRouter обычно используется для настройки приложения при загрузке пользователем определенного конечной точки напрямую. Обычно в одностраничном приложении пользователи ожидают возможности легко перемещаться к разделу приложения, сохраняя закладку URL и загружая его непосредственно. Давайте рассмотрим конкретный пример:

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

var EmailController = {
  showEmail: function(email) {
    // Look up the email and display it in our main layout
  }
};

var EmailRouter = Mn.AppRouter.extend({
  controller: EmailController,

  appRoutes: {
    'emails/:email': 'showEmail'
  }
});

Предполагая, что наше приложение обслуживается из корня, всякий раз, когда пользователь обращается к http://ourapplication.com/#emails/email-subject-line-123, метод showEmail будет вызван со значением email-subject-line-123 в качестве аргумента. Это будет рассмотрено более подробно ниже.

Настройка маршрутов

AppRouter использует параметр appRoutes для определения того, как мы реагируем на доступ к маршрутам. Для определения маршрутов укажите маршрут в качестве ключа и метод вызова в виде строки, ссылающейся на метод в вашем контроллере. Для получения дополнительной информации об определениях маршрутов, см. [документацию Backbone][#backbone-routes].

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

var Mn = require('backbone.marionette');
var EmailController = require('./emails/controller/email');

var MyRouter = Mn.AppRouter.extend({
  controller: EmailController,

  // "someMethod" must exist at controller.someMethod
  appRoutes: {
    'email': 'listEmails',
    'email/:email': 'showEmail'
  }
});

Так как AppRouter расширяет Backbone.Router, вы также можете определить атрибут routes, обратные вызовы которых должны присутствовать в AppRouter:

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

var MyRouter = Mn.AppRouter.extend({
  routes: {
    'email/:email': 'showEmail'
  },

  showEmail: function(email) {
    // show the email
  }
})

См. документацию Backbone для получения дополнительной информации об определении routes.

Настройка маршрутов в конструкторе

Если вам нужен больший контроль при управлении маршрутами, вы можете определить маршруты при создании экземпляра маршрутизатора:

var Mn = require('backbone.marionette');
var EmailController = require('./emails/controllers/email');

var MyRouter = new Mn.AppRouter({
  controller: EmailController,
  appRoutes: {
    'email/': 'listEmails',
    'email/:email': 'showEmail'
  }
});

Добавление маршрутов во время выполнения

Помимо настройки appRoutes для AppRouter, вы можете добавлять маршруты приложения во время выполнения в экземпляр маршрутизатора. Это делается с помощью вызова метода appRoute(). Он работает так же, как встроенный вызов router.route() из маршрутизатора Backbone, но имеет все те же семантику и поведение конфигурации appRoutes.

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

var MyRouter = Mn.AppRouter.extend({});

var router = new MyRouter();
router.appRoute("/foo", "fooThat");

Также вы можете указать контроллер с несколькими маршрутами во время выполнения с помощью метода processAppRoutes. Это сохранит существующий контроллер:

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

var MyRouter = Mn.AppRouter.extend({});

var router = new MyRouter();
router.processAppRoutes(myController, {
  "foo": "doFoo",
  "bar/:id": "doBar"
});

Указание контроллера

Маршрутизаторы App могут использовать только один объект controller. Вы можете либо указать его непосредственно в определении маршрутизатора:

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

var someController = {
  someMethod: function(){ /*...*/ }
};

Mn.AppRouter.extend({
  controller: someController
});

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

Использование Marionette.Object

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

Несколько маршрутизаторов

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

История Backbone

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

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

var EmailView = require('./email/views/email');

var EmailList = Mn.View.extend({
  regions: {
    layout: '.layout-hook'
  },

  showEmail: function(model) {
    this.showChildView('layout', new EmailView({model: model}));
    Bb.history.navigate('email/' + model.id);
  }
});

Как указано в документации Backbone, navigate принимает аргумент options, который позволяет вам trigger при изменении маршрута. Мы не рекомендуем этого делать, так как это может вызывать побочные эффекты, затрудняя обеспечение того, что маршрут навигации будет посещен только один раз, или случайное срабатывание различных изменений маршрутов.

Обработка изменений маршрутов

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

var Mn = require('backbone.marionette');
var Controller = require('./email/controller');

var MyRouter = Mn.AppRouter.extend({
  controller: Controller,

  appRoutes: {
    'emails/:email': 'showEmail'
  },

  onRoute: function(name, path, args) {
    console.log('User navigated to ' + path);
  }
});

Обработчик событий принимает три аргумента:

1. name — имя маршрута
2. path — путь, который вызвал это событие
3. args — аргументы, переданные в маршрут