根据渲染视图突出显示菜单/子菜单

Question

我有一个相当大的Backbone应用程序,菜单/子菜单是一个单独的视图.在菜单视图中,我有处理点击事件的逻辑li并突出显示.但是,li当我从应用程序中导航到另一个视图时,我仍然坚持如何突出显示特定内容(例如,使用路由器).

可用选项:

1. 从每个视图中render(),访问菜单div并突出显示所需的li
2. 使用事件机制并从每个视图中render()触发一个事件'CustomerUpdate::render'.

我觉得2]是正确的做法.但我愿意接受建议.

你遵循什么技巧？

Answer 1

(1)有点讨厌,在整个地方泄漏菜单的内部状态和结构.最终你的主要景观会与你的菜单紧密结合,导致一小块泥土和小泥球一直长成泥球.

我认为(2)是在正确的轨道,但我会把它分开一点.当前视图是应用程序状态的一部分,通过路由器切换视图是应用程序状态的变化.我们在Backbone中使用什么来跟踪状态和状态变化？我们使用模型和"change"事件.如果您的应用程序状态具有专用的全局模型:

AppState  = Backbone.Model.extend({});
app_state = new AppState;

然后管理菜单的视图可以绑定到以下更改app_state:

initialize: function() {
    _.bindAll(this, 'change_current_view');
    app_state.on('change:current_view', this.change_current_view);
}

并且事件处理程序可以处理<li>s:

change_current_view: function() {
    this.$('li').removeClass('current');
    // This selector is, of course, just for illustration
    this.$('#' + app_state.get('current_view')).addClass('current');
}

然后您的路由器可以交换视图并app_state.set({ current_view: '...'})触发辅助操作.你甚至可以拥有一些内容,例如应用程序级别视图,它可以监听"change:current_view"并让侦听器处理交换视图; 这将简化您的路由器.这是一个快速演示,以帮助说明我在说什么:

http://jsfiddle.net/ambiguous/fr8sG/

这种"应用程序状态模型"方法通常非常有用; 您可以轻松地向app-model添加更多状态,设置首选项编辑器等.您还可以免费获得持久性和应用程序初始化.