javascript - backbonejs - 为什么这个backbonejs模型内容没有改变？

Question

我刚刚开始学习backbonejs。这是我的一些演示代码行:

        var i = 0;
        Player = Backbone.Model.extend({
            default: {
                name : "noName",
                HP: 100,
                MP: 100
            },
            initialize: function(){
                i++;
                this.name = "Player "+i.toString();
                alert(this.name+" created !");
                this.on("change:name", function(model){
                    var name = model.get("name");
                    alert("Change "+this.name+ " to "+name);
                });

            }
        });

        var p1 = new Player({HP: 200});
        var p2 = new Player({MP: 200});
        p1.set({name: "A"});
        p2.set({name:"B"});
        p1.set({name: "A2"});

现在让我困惑的是为什么当我在浏览器上运行这段代码时，它会出现:

Player 1 created !
Player 2 created !
Change Player 1 to A
Change Player 2 to B
Change Player 1 to A2 

(为什么不将A更改为A2？，因为我之前已经将玩家1更改为A？)

Answer 1

首先要理解的重要一点是:

this.name = "Player "+i;

不像做:

this.set("name", "Player" + i);

this.name 只是在 javascrip 对象中添加字段名称，而 this.set("name", ...) 正在更改 Backbone 模型属性(如预期)

这是我为您提供的建议代码:

defaults: {
  name : "noName",
  HP: 100,
  MP: 100
},
initialize: function(){
  i++;
  this.on("change:name", function(model){
    alert("Change "+model.previous("name")+ " to "+ model.get("name"));
  });
  this.set('name', "Player "+ i);
}