[英]Highlight selected item with backbone router callbacks
I have an application, with a sidebar that holds many items and a main div which displays these items.我有一个应用程序,带有一个包含许多项目的侧边栏和一个显示这些项目的主div。 There is also a simple
Backbone.Router
, a ItemsCollection
and a Item
model.还有一个简单的
Backbone.Router
、一个ItemsCollection
和一个Item
模型。 I've got a SidebarView
for the sidebar and a ShowView
to show the selected 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 *| |
+---------+---------------+
On startup, I initialize the SidebarView
and the MainRouter
.在启动时,我初始化
SidebarView
和MainRouter
。 The SidebarView
attaches its render
method to the ItemCollection#all
event. SidebarView
将其render
方法附加到ItemCollection#all
事件。 I also attach the ItemCollection#refresh
event to Backbone.history.start()
, then I fetch the ItemCollection
.我还将
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();
});
I want to highlight the currently selected item.我想突出显示当前选定的项目。 This works by binding the
route.show
event from the router:这是通过从路由器绑定
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")
It works perfectly when I select an Item when the app is loaded.当我在加载应用程序时选择一个项目时,它工作得很好。 But when the page is loaded with
#/show/123
as the URL, the item is not highlighted.但是当页面以
#/show/123
作为 URL 加载时,该项目不会突出显示。 I run the debugger and found out, that the sidebar is not rendered yet, when the highlight_item
callback is invoked.我运行调试器并发现,当调用
highlight_item
回调时,侧边栏尚未呈现。
Is there any way to reorder the bindings, so that the Item#refresh
event invokes SidebarView#render
first and then start the routing?有没有办法对绑定重新排序,以便
Item#refresh
事件先调用SidebarView#render
然后开始路由?
Maybe a workaround that just takes the current route from the window.router
(I did not find any method in the Backbone Docs) and highlights the Item when its rendered?也许一种解决方法只是从
window.router
获取当前路由(我在 Backbone Docs 中没有找到任何方法)并在渲染时突出显示项目?
Or is my initialization just stupid and should I handle things differently?或者我的初始化只是愚蠢的,我应该以不同的方式处理事情吗?
You could do two things:你可以做两件事:
highlight_item
could keep track of which item is supposed to be highlighted. highlight_item
可以跟踪应该突出显示哪个项目。render
to initialize the highlighted item.render
以初始化突出显示的项目。 Something like this:像这样的东西:
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')
So, as long as highlight_item
gets called, highlight_current
will also get called with the appropriate @highlighted_id
set and everything should work out.因此,只要
highlight_item
被调用, highlight_current
也将被调用并使用适当的@highlighted_id
集,一切都应该解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.