Question

以下是一个简单的例子：

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

我有一个模型'阿凡达'，收藏'Avatars'和模特的视图'AvatarView'。此外，还有一个名为“AvatarAppView”的视图，负责呈现应用视图。

我的实施如下：

当选择一个头像时，在模型的视图'AvatarView'中触发click事件，然后它将被选中，但不能取消选择其他模型。

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

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事件处理程序取消选择其他AvatarView：

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

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

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

1 个答案: