javascript - 向对象添加 Backbone 事件，修改时未注册 "on"事件

Question

我可能误解了 Backbone 中的事件系统，但是当我尝试以下代码时什么也没有发生。当我向 Backbone.Events 扩展对象添加新属性时，它不应该触发某种更改、更新或重置事件吗？就像模型一样吗？

CoffeeScript :

data = items: {}

eventedData = _.extend data, Backbone.Events

# It has an on method!
console.log eventedData.on.length > 0

# Running on with everything I could imagine happening
eventedData.on 'update change reset add', () ->
  alert 'Yay!'

# Triggers nothing
eventedData.items.newthing = 'Testing'

上面的代码在一个JSBin http://jsbin.com/qofad/1/edit

我尝试使用object.set，或者直接应用它而不是在子对象中，但现在不行。有什么想法吗？

提前非常感谢:)

Answer 1

您将 .get 和 .set 以及 View /模型/集合中的其他功能与事件混淆了。

例如，这就是主干如何在 .set 上触发更改事件:

set: function(attr, value) {
  this.attributes[attr] = value;
  this.trigger('change:' attr, ...);
}

代码比这更复杂一些，但这就是它本质上所做的。那里没有魔法。 Backbone 没有您所期望的“神奇”对象观察功能，但这很有意义，但超出了回答问题的范围。

抱歉，我不知道如何在 CoffeeScript 中编写它，并且您的 jsbin 中有 2 个错误，但这里是普通 JavaScript 中的示例:

var ItemModel = function() {
    this.items = {}; // It is important this is created in instance-scope.
    this.initialize();
};

_.extend(ItemModel.prototype, Backbone.Events, {
    initialize: function() {},

    set: function(attr, value, options) {
        options = options || {};
        var oldValue = this.items[attr];
        this.items[attr] = value;

        if (!options.silent) {
            this.trigger('change', attr, value, {
                oldValue: oldValue
            });
            this.trigger('change:' + attr, value, {
                oldValue: oldValue
            });
        }
    },

    get: function(attr) {
        return this.items[attr];   
    }
});

ItemModel.extend = Backbone.Model.extend;

var MyImplementationOfItem = ItemModel.extend({
    initialize: function() {
        this.on('change', this.onItemChange);   
    },

    onItemChange: function(attr, value, options) {
        alert(attr + ' changed to ' + value + ' from ' + options.oldValue);  
    }
});

var myImplementationOfItem = new MyImplementationOfItem();

// Wait 4s then trigger it.
setTimeout(function() {
    myImplementationOfItem.set('hello', 'world');
}, 2000);

setTimeout(function() {
    myImplementationOfItem.set('hello', 'universe');
}, 4000);

fiddle :http://jsfiddle.net/5jaeu/1/

请注意，这是 View /模型/集合中已有的 get 和 set 的简化重新实现。我们鼓励您改用它们!