backbone.js - 在 Backbone 视图中选择一个时如何取消选择其他人？

Question

这是一个简单的示例，如下所示：

头像有很多，每次只能选择一个头像。

我有一个模型“Avatar”、集合“Avatars”和模型视图“AvatarView”。还有一个名为“AvatarAppView”的视图负责呈现应用视图。

我的实现如下：

When one avatar is selected, click event is trigged in the model's view 'AvatarView', then it will be selected but cannot make other models unselected.

有什么好的解决方案吗？谢谢你。

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;
}

然后是一个简单的selected事件处理程序，AvatarAppView用于取消选择其他AvatarViews：

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

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