骨干网将模型添加到集合中会添加到集合中的所有模型

Question

使用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”和“红心 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();

Answer 1

在模型的 defaults 哈希端中定义的对象在实例之间共享（请参阅 In what cases does defaults need to be a function? 以获得更长的解释）

使用函数返回默认值：

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>