4

更新：这是我正在从事的项目的工作演示：http: //www.newedenfaces.com

我有两个视图：保存 2 个缩略图（集合）的PeopleView和PersonView - 每个缩略图本身（模型）。

这基本上是一个 Facemash 克隆，您可以在其中并排放置两个图像。如果一个人赢得比赛，另一个人输掉比赛。

为了更新wins count，这很简单，只需将其添加到PersonView：

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

但是如何通过增加损失计数来更新另一个模型呢？或者我应该在集合级别而不是在单个模型上执行这种类型的逻辑？

更新

在我找到一个优雅的解决方案之前，我已经设法使用这个 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();
  },

我的PersonView仍然处理获胜次数的更新。但是，PeopleView集合视图会在更新获胜次数时侦听该事件。发生这种情况时，它会采用该模型并获取其索引位置。由于我只有 2 个视图 / 2 个模型，因此另一个模型一定是“失败者”。您可以通过 获取另一个模型的索引Math.abs(1 - winnerIndex)，而您唯一需要做的就是更新其损失计数。

注意：我刚开始学习 Backbone，所以这是我第一个使用它的项目。我真的希望有更好的方法来做到这一点。如果您知道，请发布答案，以便我接受并关闭此问题。

4

2 回答 2

3

与@pvnarula 的答案类似，您可以使用Backbone 的内置事件模块来创建模型视图绑定到的事件调度程序。

// 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();
}

还值得查看这篇文章以了解有关 Backbone 事件的更多信息：http: //lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/

于 2013-06-07T23:53:25.497 回答
1

实际上，您想从当前视图访问其他视图并相应地更新它。恐怕您需要创建自己的观察者模式。我的意思是发布和订阅。

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

您可以轻松地从网络上获得与骨干兼容的非常好的可用模式。

于 2013-06-07T20:44:39.330 回答