如何从Backbone.js中的集合中的另一个模型触发模型更新？

Question

Update: Here is a working demo of the project I was working on: http://www.newedenfaces.com

I have two views: PeopleView that holds 2 thumbnails (collection) and PersonView - each thumbnail itself (model).

This is basically a Facemash clone where you have two images side-by-side. If one person wins the game, another one loses the game.

In order to update wins count , it's easy, just add this to the PersonView :

// Model View
events: {
    'click img': 'winner'
},
winner: function() {
    this.model.set('wins', this.model.get('wins') + 1);
    this.model.save();
}

But how do I update the other model by incrementing the losses count? Or should I be doing this type of logic at the collection level rather than on an individual model?

Update

Until I find an elegant solution I've managed to solve this problem using this hack:

// Collection View
initialize: function() {
    this.collection.on('change:wins', this.updateLosses, this);
  },

  updateLosses: function(model) {
    var winnerIndex = this.collection.indexOf(model);
    var otherModel = this.collection.at(Math.abs(1 - winnerIndex));
    otherModel.set('losses', otherModel.get('losses') + 1);
    otherModel.save();
    this.render();
  },

My PersonView still handles the update of wins count. However the PeopleView collection view listens for the event when wins count is updated. When that happens it takes that model and gets its index position. Since I only have 2 views / 2 models, the other model must have been a "loser". You get the index of the other model via Math.abs(1 - winnerIndex) , and the only things that you have to do is update its losses count .

Note : I have just started learning Backbone, so this is my first project using it. I really hope there is a better way to do this. If you know, post an answer so I could accept and close this question.

Answer 1

Similar to @pvnarula's answer, you can use Backbone's built in Event module to create an event dispatcher that model views are bound to.

// Define an event dispatcher/handler
var dispatcher = _.extend({}, Backbone.Events);

// Model View
initialize: {
    this.listenTo(dispatcher, 'game:over', this.updateCounts);
}

events: {
    'click img': 'winner'
},

winner: function() {
    // just trigger the custom event and let each view figure out how to respond.
    // also pass along the id of the winning model
    dispatcher.trigger('game:over', this.model.id)
},

updateCounts: function(winnerId) {
    if (this.model.id === winnerId) {
        this.model.set('wins', this.model.get('wins') + 1); 
    } else {
        this.model.set('losses', this.model.get('losses') + 1);
    }
    this.model.save();
}

Also worth checking out this article for more about Backbone Events: http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/

Answer 2

Actually you want to access other view from your current view and update it accordingly. I am afraid you need to create your own observer pattern. I mean publish and subscribe.

var otherView = Backbone.View.extend({
   initialize : function(){
       observer.subscribe('your_custom_event');
   },
   your_custom_event : function(){
      //update the view and it's model
   }
});

winner: function() {
    this.model.set('wins', this.model.get('wins') + 1);
    this.model.save({wins: this.model.get('wins')});
    observer.publish('your_custom_event', arguments);
}

You can get very good available patterns from the web easily those are compatible with backbone.