如何讓一個視圖意識到另一個視圖的變化？

您有一個視圖，其中包含流派列表，另一個視圖顯示所選流派的內容。當用戶點擊列表上的流派時，其他視圖中的內容應該相應更新。

這樣做的最好方法是什麼，以使最小的依賴關係？

我還沒有找到任何其他地方聽取鼠標點擊比繪製個人流派的觀點。我可以從那裏發送一個事件，但是獲取該事件的最佳方式是更新繪製流派內容的另一個視圖的最佳方式是什麼？誰應該聽該事件，流派內容視圖或其集合？

編輯：我從應用程序的路由器實例化兩個視圖，我確實設法通過使視圖意識到彼此，但當然這不是最佳的。

2012-05-22 wannabeartist

你可以做一個簡單的模型來保存應用程序的狀態，你不需要任何幻想，只是數據包實現普通主幹事件方法：

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

然後流派列表視圖會監聽點擊事件（因爲你已經擁有），並設置當前類型的應用狀態模型當有人改變它：

var Genres = Backbone.View.extend({ 
    //... 
    choose: function(ev) { 
     // This would be the click handler for the genre, 
     // `.html()` is just for demonstration purposes, you'd 
     // probably use a data attribute in real life. 
     app_state.set({genre: $(ev.target).html() }); 
    }, 
});

的各個流派的觀點將用於偵聽應用狀態模型"change:genre"事件並隨着流派的變化而作出反應：

var Genre = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this, 'change_genre'); 
     app_state.on('change:genre', this.change_genre); 
    }, 
    //... 
    change_genre: function() { 
     // Refill the genre display... 
    } 
});

演示：對於任何數據http://jsfiddle.net/ambiguous/mwBKm/1/

可以讓模特你想和模型都是在骨幹數據事件工作的一種便捷方式。作爲額外的好處，這種方法使得持久化應用程序狀態變得相當容易：只需將通常的Backbone持久性支持添加到AppState即可。

如果你只需要一個簡單的事件總線圍繞推動非數據事件，您可以使用骨幹Events方法來構建一個簡單的事件聚合：

app.events = _.extend({}, Backbone.Events);

然後，假設你有一個全球性的app命名空間，你可以說這樣的事情：

app.events.on('some-event', some_function);

和

app.events.trigger('some-event', arg1, arg2, ...);

來源

2012-05-22 07:46:03

謝謝，這是一個很好的答案！我正在使用RequireJS進行依賴關係，但我想我只是在路由器中創建AppState模型，並在其中創建視圖並將其添加爲視圖的依賴關係 - 持久性是一個很棒的副作用！ – wannabeartist

@wannabeartist：您可以根據需要將其他位的應用程序級數據添加到AppState中（當前軌道，搜索過濾器......），並且所有內容都將整齊地排列。 –

我見過的最好的方法是在Derick Bailey提出的方法。總之，您可以創建一個事件聚合器，它提供了一個集中對象來提升不同視圖可以訂閱的事件。這個解決方案的優點在於它使用Backbone現有的事件系統非常簡單。

來源

2012-06-04 04:04:01 Benjen

如何讓一個視圖意識到另一個視圖的變化？

回答

相關問題