Menu 根据渲染视图高亮显示菜单/子菜单_Menu_Backbone.js_Menubar

Menu 根据渲染视图高亮显示菜单/子菜单

menu backbone.js

Menu 根据渲染视图高亮显示菜单/子菜单,menu,backbone.js,menubar,Menu,Backbone.js,Menubar,我有一个相当大的主干应用程序，菜单/子菜单是一个单独的视图。在菜单视图中，我有逻辑来处理li上的单击事件，并突出显示该事件。然而，当我从应用程序中导航到另一个视图时（例如，使用路由器），我被困在如何突出显示特定的li 可用选项：从每个视图render（），访问菜单div并突出显示所需的li 使用事件机制，并从每个视图render（）触发类似'CustomerUpdate:：render'的事件我觉得2]是正确的做法。但我愿意接受建议你遵循什么技巧？（1）有点恶心，菜单的内部状态和结构到处都

我有一个相当大的主干应用程序，菜单/子菜单是一个单独的视图。在菜单视图中，我有逻辑来处理

li

上的单击事件，并突出显示该事件。然而，当我从应用程序中导航到另一个视图时（例如，使用路由器），我被困在如何突出显示特定的

li

可用选项：

从每个视图

render（）

，访问菜单div并突出显示所需的

li

使用事件机制，并从每个视图

render（）

触发类似

'CustomerUpdate:：render'

的事件

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

你遵循什么技巧？

（1）有点恶心，菜单的内部状态和结构到处都是漏洞。最终，你的主要观点会与菜单紧密结合，这会导致一个小泥球，小泥球总是会变成大泥球

我认为（2）在正确的轨道上，但我会把它分开一点。当前视图是应用程序状态的一部分，通过路由器切换视图是应用程序状态的变化。我们在主干网中使用什么来跟踪状态和状态变化？我们使用模型和

“更改”

事件。如果您的应用程序状态有专用的全局模型：

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

然后，管理菜单的视图可以绑定到

app\u state

中的更改：

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

事件处理程序可以处理

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:''.'}）

以触发辅助操作。您甚至可以拥有一些东西，例如应用程序级视图，用于侦听

“更改：当前视图”

，并让该侦听器处理交换视图的问题；这将简化您的路由器。下面是一个快速演示，有助于说明我所说的内容：

这种“应用程序状态模型”方法通常非常有用；您可以轻松地向应用程序模型添加更多的状态，设置首选项编辑器等。您还可以免费获得持久性和应用程序初始化。

（1）有点令人讨厌，它会将菜单的内部状态和结构泄漏得到处都是。最终，你的主要观点会与菜单紧密结合，这会导致一个小泥球，小泥球总是会变成大泥球

“更改”