Как структурировать костяк приложения марионетки?

У меня есть приложение, которое я хочу создать с помощью Backbone Marionette. В принципе, структура пользовательского интерфейса очень проста. Есть:

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

Например, меню может переключаться между двумя частями приложения, такими как" Почта"," Календарь "и"контакты". Каждая из этих частей имеет свою собственную поднавигацию, которая должна быть показана в виде поднавигации, и каждая часть имеет вид по умолчанию. Например, в части "почта" это может быть представление "входящие", в части "календарь" это может быть представление "месяц".

Таким образом, в общем случае мы имеем вложенную навигацию.

Как это реализовать с помощью маршрутизаторов?

Моя идея состоит в том, чтобы иметь маршрутизатор прикладного уровня, который просто обеспечивает маршруты для таких частей, как #mail и #calendar.

Суб-навигации, представления должны иметь собственные маршрутизаторы. Так, например, представление поднавигации почты может иметь маршрутизатор для inbox и sent.

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

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

Или этот подход совершенно неверен?
1 2
backbone.js marionette

1 ответ:

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

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

var BaseRouter = Backbone.Router.extend({

    //Root path for all routes defined by this router. Override this in a deriving
    //class for keeping route table DRY.
    urlRoot: undefined,

    //override the route method to prefix the route URL
    route: function(route, name, callback) {
      if(this.urlRoot) {
        route = (route === '' ? this.urlRoot : this.urlRoot + "/" + route);
      }

      //define route
      Backbone.Router.prototype.route.call(this, route, name, callback);

      //also support URLs with trailing slashes
      Backbone.Router.prototype.route.call(this, route + "/", name, callback);
    }
});

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

var CalendarRouter = BaseRouter.extend({
    //all routes will be relative to "calendar"
    urlRoot:"calendar",
    routes: {
        //...
    }
}):

Конечно, для моего случая это имеет смысл также потому, что я определяю другие общие задачи маршрутизатора в базовом классе. Просто чтобы избежать ввода дополнительного префикса "календарь" для каждого url маршрута на самом деле не гарантирует этого.

Edit: просто чтобы уточнить, костяк.Плагин SubRoute не заставляет вас определять корневой маршрут в главном маршрутизаторе, вы можете использовать его так же, как и базовый класс, предложил я. Но если все, что вам нужно, - это префикс маршрута, то базовый класс-более легкое и простое решение.

2