Выделите выбранный элемент с помощью обратных вызовов магистрального маршрутизатора.

Макет приложения

У меня есть приложение с боковой панелью , которая содержит множество элементов и основной div, который отображает эти элементы. Также существует простая модель Backbone.Router , модель ItemsCollection и Item . У меня есть SidebarView для боковой панели и ShowView для отображения выбранного элемента.

                  +-------------------------+
                  | http://app.de/#/show/3  |   <-- Current URL
                  +-------------------------+
                  | Sidebar | Main          |
                  |---------+---------------|
                  | Item 1  |               |
 SidebarView -->  |---------|    Display    |
                  | Item 2  |    Item  3    | <-- MainView handled by
                  |---------|    here       |          MainRouter
Selected Item --> | Item 3 *|               |
                  +---------+---------------+

При запуске я инициализирую SidebarView и MainRouter . SidebarView присоединяет свой метод render к событию ItemCollection # all . Я также прикрепляю событие ItemCollection # refresh к Backbone.history.start () , затем извлекаю ItemCollection .

$(function() {
  window.router = new App.MainRouter;
  window.sidebar = new App.SidebarView;
  ItemCollection.bind("reset", _.once(function(){Backbone.history.start()}));
  ItemCollection.fetch();
});

Проблема

Я хочу выделить текущий выбранный элемент. Это работает путем привязки события route.show от маршрутизатора:

# I removed all code which is not necessary to understand the binding
class SidebarView extends Backbone.View
  el: ".sidebar"

  initialize: () ->
    window.router.bind 'route:show', @highlight_item

  # The route is routed to #/show/:id, so I get the id here
  highlight_item: (id) ->
    $(".sidebar .collection .item").removeClass("selected")
    $("#item-" + id).addClass("selected")

Он отлично работает, когда я выбираю элемент при загрузке приложения. Но когда страница загружается с # / show / 123 в качестве URL-адреса, элемент не выделяется. Я запустил отладчик и обнаружил, что боковая панель еще не отображается, когда вызывается обратный вызов highlight_item .

Возможные решения

Есть ли способ изменить порядок привязок, чтобы событие Item # refresh сначала запускало SidebarView # render , а затем запускало маршрутизацию?

Может быть, обходной путь, который просто берет текущий маршрут из window.router (я не нашел никакого метода в Backbone Docs) и выделяет элемент при его визуализации?

Или моя инициализация просто глупая и должен ли я поступать иначе?

5
задан iblue 10 February 2012 в 19:20
поделиться