backbone.js 将模型添加到集合添加到集合中的所有模型
backbone.js adding model to collection adds to all models in collection
玩 backbone.js,到目前为止,我已经为一副纸牌和两个玩家创建了模型和集合。问题是当我尝试从牌组中移出一张牌并将其添加到玩家手中时,该牌会添加到所有玩家手中。
这是我的违规代码,希望研究人员能立即发现错误:
//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);
我最终得到的结果是两名玩家同时拥有 "A of hearts" 和“红心 2”,而这应该是每人一张牌。
完整代码:
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();
在实例之间共享的模型 defaults
散列端中定义的对象(有关详细说明,请参阅 In what cases does defaults need to be a function?)
使用函数 return 您的默认值:
game.Player = Backbone.Model.extend({
defaults: function() {
return {
name : "",
hand : new game.Hand()
};
}
});
和演示
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>
玩 backbone.js,到目前为止,我已经为一副纸牌和两个玩家创建了模型和集合。问题是当我尝试从牌组中移出一张牌并将其添加到玩家手中时,该牌会添加到所有玩家手中。
这是我的违规代码,希望研究人员能立即发现错误:
//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);
我最终得到的结果是两名玩家同时拥有 "A of hearts" 和“红心 2”,而这应该是每人一张牌。
完整代码:
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();
在实例之间共享的模型 defaults
散列端中定义的对象(有关详细说明,请参阅 In what cases does defaults need to be a function?)
使用函数 return 您的默认值:
game.Player = Backbone.Model.extend({
defaults: function() {
return {
name : "",
hand : new game.Hand()
};
}
});
和演示
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>