我有两种观点: PeopleView ,其中包含2个缩略图(集合)和 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 仍会处理wins count的更新。但是,当strong计数更新时, PeopleView 集合视图会侦听事件。当发生这种情况时,它会采用该模型并获得其索引位置。由于我只有2个视图/ 2个模型,所以另一个模型必定是“失败者”。您可以通过Math.abs(1 - winnerIndex)
获取其他模型的索引,并且您需要做的唯一事情是更新其损失计数。
注意 :我刚开始学习Backbone,所以这是我第一个使用它的项目。 我真的希望有更好的方法来做到这一点。如果你知道的话,发一个答案让我接受并关闭这个问题。
答案 0 :(得分:3)
与@ pvnarula的答案类似,您可以使用Backbone的内置Event模块 创建一个模型视图绑定的事件调度程序。
// 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 Events的更多信息:http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/
答案 1 :(得分: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);
}
您可以从网络上轻松获得与骨干网兼容的非常好的可用模式。