0

这是一个简单的示例,如下所示:

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

我有一个模型“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.

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

4

1 回答 1

0

骨干视图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/

于 2012-07-21T02:14:13.123 回答