根據渲染視圖突出顯示菜單/子菜單

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>小號：

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/

這種「應用狀態模式」的做法是在一般非常有用;您可以輕鬆地將更多狀態添加到應用程序模型，設置首選項編輯器等。您還可以免費獲得持久性和應用程序初始化。