javascript - 触发 Backbone 模型变更事件的正确方法

Question

我正在尝试创建简单的 Backbone 示例，但我不明白我的代码有什么问题。为什么有 2 个 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>

Answer 1

更改此行:

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

对此:

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

对于问题的第二部分，使用 .set() 进行一组脏检查，看看您是否更改、删除或未更改任何内容，然后触发相应的事件。它不是设置 object.property 值，而是设置 object.attributes.property 值(由backbone.js 跟踪)。如果您直接更改对象属性，则无法为您启动该事件。

...当然，除非您使用令人惊叹且才华横溢 Object.observe()!!!1! - ITS ALIVE (in Chrome >36)