[英]backbone.js adding model to collection adds to all models in collection
Playing around with backbone.js, so far I've created models and collections for a deck of cards and two players. 和backbone.js一起玩,到目前为止,我已经为一副牌和两个玩家创建了模型和集合。 The problem is when I try move a card from the deck and add it to the player's hand the card gets added to all players hands.
问题是,当我尝试从牌组中移动一张牌并将其添加到玩家手中时,该牌将被添加到所有玩家手中。
Here's my offending code, hopefully a boffin will spot the mistake straight away: 这是我的违规代码,希望boffin会立即发现错误:
//the first card goes to player1
var topCard = deck.at(0); //A of hearts
deck.remove(topCard);
var hand = players.at(0).get("hand");
hand.add(topCard);
//the second card goes to player2
topCard = deck.at(0); //2 of hearts
deck.remove(topCard);
hand = players.at(1).get("hand");
hand.add(topCard);
I end up with both players having both the "A of hearts" and the "2 of hearts" when it should be one card each. 我最终得到两个球员同时拥有“心中的A”和“心中的2个”,每个人应该是一张牌。
full code: 完整代码:
var game = {};
game.Durak = Backbone.Model.extend({
initialize : function() {
var deck = new game.Deck();
var player1 = new game.Player();
player1.name = "Dave";
var player2 = new game.Player();
var players = new game.Players();
players.add(player1);
players.add(player2);
deck.deal(players);
}
});
game.Card = Backbone.Model.extend({
defaults: {
"suit" : "spades",
"rank" : "A"
}
});
game.Deck = Backbone.Collection.extend({
model: game.Card,
initialize : function() {
var suits = ['hearts', 'spades', 'clubs', 'diamonds'],
ranks = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K'];
_.each(suits, function(s) {
_.each(ranks, function(r) {
this.add({
suit: s,
rank: r
});
}, this);
}, this);
},
shuffle : function() {
this.reset(_.shuffle(this.models));
},
deal : function(players) {
// this bit makes me sad!
var topCard = this.at(0);
this.remove(topCard);
var hand = players.at(0).get("hand");
hand.add(topCard);
topCard = this.at(0);
this.remove(topCard);
hand = players.at(1).get("hand");
hand.add(topCard);
}
// that bit made me sad
});
game.Hand = Backbone.Collection.extend({
model : game.Card
})
game.Player = Backbone.Model.extend({
defaults : {
name : "",
hand : new game.Hand()
}
});
game.Players = Backbone.Collection.extend({
model: game.Player
});
new game.Durak();
Objects defined in a model's defaults
hash end shared between instances (see In what cases does defaults need to be a function? for a longer explanation) 在模型的
defaults
哈希端中定义的对象在实例之间共享(请参阅在什么情况下默认需要是一个函数?以获得更长的解释)
Use a function to return your defaults values : 使用函数返回默认值:
game.Player = Backbone.Model.extend({
defaults: function() {
return {
name : "",
hand : new game.Hand()
};
}
});
and a demo 和一个演示
var game = {}; game.Card = Backbone.Model.extend({ defaults: { "suit" : "spades", "rank" : "A" } }); game.Hand = Backbone.Collection.extend({ model : game.Card }); game.Player = Backbone.Model.extend({ defaults: function() { return { hand: new game.Hand() }; } }); var players = new Backbone.Collection([ new game.Player (), new game.Player () ]); var deck = new Backbone.Collection([ {suit: "heart", rank: "A"}, {suit: "heart", rank: "2"} ]); //the first card goes to player1 var topCard = deck.at(0); //A of hearts deck.remove(topCard); var hand1 = players.at(0).get("hand"); hand1.add(topCard); //the second card goes to player2 topCard = deck.at(0); //2 of hearts deck.remove(topCard); var hand2 = players.at(1).get("hand"); hand2.add(topCard); $('body').append("Hand 1 " + JSON.stringify(hand1.toJSON())); $('body').append("Hand 2 " + JSON.stringify(hand2.toJSON()));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.