Javascript 触发主干模型更改事件的正确方法

我试图创建一个简单的主干示例，但我不明白我的代码有什么问题。为什么有两个testAttr属性（直接在对象上，一个在属性对象中）以及为什么没有在任何更改上触发更改事件？我也不明白在模型上设置属性的正确方法是什么

这是我的密码：

<div id="note"></div>
<script>
var NoteModel = Backbone.Model.extend({
    defaults: function() {
        return {
            testAttr: "Default testAttr"
        }
    }
});

var NoteView = Backbone.View.extend({
    initialize : function() {
        this.listenTo(this.model, "change", this.changed());
    },
    el: "#note",
    changed: function () {
        debugger;
        console.log("change triggered");
        this.render();
    },
    render : function() {
        this.$el.html("<h1>" + this.model.get("testAttr") + "</h1>");
        return this;
    }
});

var note = new NoteModel();

var noteView = new NoteView({model: note});
noteView.render();

note.set("testAttr", "blah1");
note.testAttr = "blah2";
</script>

var NoteModel=Backbone.Model.extend({
默认值：函数（）{
返回{
testAttr：“默认testAttr”
}
}
});
var NoteView=Backbone.View.extend({
初始化：函数（）{
this.listenTo（this.model，“change”，this.changed（））；
},
el:“注意”，
已更改：函数（）{
调试器；
控制台日志（“更改触发”）；
这个。render（）；
},
render:function（）{
this.$el.html（“+this.model.get”（“testAttr”）+”）；
归还这个；
}
});
var note=新的NoteModel（）；
var noteView=newnoteview（{model:note}）；
render（）；
注：集合（“测试器”、“blah1”）；
note.testAttr=“blah2”；

更改此行：

this.listenTo(this.model, "change", this.changed());

为此：

this.listenTo(this.model, "change", this.changed);

对于问题的第二部分，使用

.set（）

进行一系列脏检查，查看您是否更改、删除或没有更改任何内容，然后触发相应的事件。它不是设置

对象.property

值，而是设置

对象.attributes.property

值（由backbone.js跟踪）。如果直接更改对象属性，则没有什么可以为您启动该事件

…当然，除非你使用了惊人且有才华的

对象。观察（）

！！！1! -

note.set（“testAttr，blah1”）是为模型设置属性的正确方法。使用note.testAttr，您只需设置Javascript对象的testAttr属性，该对象恰好是NoteModel，但您没有这样设置主干模型的属性。