如何在Backbone視圖中選擇一個時取消選擇其他人？

Question

這是一個簡單的例子，如下所示：

有很多頭像，每次只能選擇一個頭像。

我有一個模型'阿凡達'，集合'阿凡達'和模型的視圖'阿凡達'。 另外還有一個名爲'AvatarAppView'的視圖，負責呈現應用視圖。

我實現如下：

當選擇了一個頭像，單擊事件被觸發模型的觀點，「AvatarView」，那麼它將被選擇，但不能讓其他機型選中。

有沒有什麼好的解決方案？謝謝。

Answer 1

骨幹視圖有Backbone.Events混合，所以視圖可以產生自己的事件，其他視圖可以監聽這些事件。所以在選擇時，你AvatarView可以觸發事件：

select: function() { 
    // Mark this avatar as selected... 
    this.trigger('selected', this); 
}, 
unselect: function() { 
    // Undo the "mark this avatar as selected" from above. 
} 

，然後AvatarAppView可以監聽這些事件：

initialize: function() { 
    _.bindAll(this, 'selected'); 
    //... 
}, 
render: function() { 
    this.kids = [ ]; 
    this.collection.each(function(m) { 
     var v = new AvatarView({ model: m }); 
     v.on('selected', this.selected); 
     this.kids.push(v); 
     this.$el.append(v.render().el); 
    }, this); 
    return this; 
} 

那麼對於AvatarAppView簡單selected事件處理程序取消選擇其他AvatarView小號：

selected: function(v) { 
    _.chain(this.kids).reject(function(k) { return k == v }).invoke('unselect'); 
} 

演示：http://jsfiddle.net/ambiguous/thRHK/