1

我有一个相当大的主干应用程序，其中菜单/子菜单是一个单独的视图。在菜单视图中，我有处理点击事件li并突出显示它的逻辑。li但是，当我从应用程序内导航到另一个视图时（例如，使用路由器），我被困在如何突出显示特定内容上。

可用选项：

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

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

你遵循什么技术？

4

1 回答 1

7

(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/

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

于 2012-06-07T05:57:27.897 回答