突出显示具有骨干路由器回调的所选项目

Highlight selected item with backbone router callbacks

本文关键字：回调 选项 项目 路由器 显示      更新时间：2023-09-26

应用程序布局

我有一个应用程序，它有一个侧边栏，其中包含许多项，还有一个显示这些项的maindiv。还有一个简单的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中获取当前路线（我在骨干文档中没有找到任何方法），并在项目渲染时突出显示它？

或者我的初始化只是愚蠢的，我应该以不同的方式处理事情吗？

您可以做两件事：

  1. CCD_ 20可以跟踪哪个项目应该被突出显示
  2. 更新render以初始化高亮显示的项目

类似这样的东西：

initialize: () ->
  @highlighted_id = null
  window.router.bind 'route:show', @highlight_item
render: () ->
  # Set everything up inside @el as usual
  @highlight_current()
  @
highlight_item: (id) =>
  @highlighted_id = id
  @highlight_current()
highlight_current: () ->
  return unless(@highlighted_id)
  $(@el)
    .find('.selected').removeClass('selected')
    .end()
    .find("#item-#{@highlighted_id}").addClass('selected')

因此，只要highlight_item被调用，highlight_current也将被调用，并设置适当的@highlighted_id，一切都会正常进行。

相关文章：