Question

It’s an easy example as following:

There are many avatars and only one avatar can be selected each time.

I have a model ‘Avatar’, collection ‘Avatars’ and model’s view ‘AvatarView’.
Also there is a view named ‘AvatarAppView’ which is responsible to render the app view.

My implementation is as following:

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.

Are there any nice solutions? Thank you.

Answer 1

Backbone views have Backbone.Events mixed in so views can produce their own events and other views can listen for those events. So your AvatarView can trigger an event when it is selected:

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

and then the AvatarAppView can listen for those events:

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

Then a simple selected event handler for AvatarAppView to unselect the other AvatarViews:

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

Demo: http://jsfiddle.net/ambiguous/thRHK/