覆盖Backbone模型更改事件

时间:2012-02-24 23:29:46

标签: javascript events backbone.js backbone-events

我认为我想要做的很简单,我只是不知道该怎么做。当我的一个模型属性发生变化以便将一些数据传递给事件处理程序时(无论更改是值的增加还是减少),我想触发自己的事件。

基本上我希望我的处理程序在视图中执行此操作

handler: function(increased) {
   if(increased) {
      alert("the value increased")
   }
   else {
      alert("the value decreased")
   }
}

// ...

this.model.on("change:attr", this.handler, this);

3 个答案:

答案 0 :(得分:12)

你走了:你基本上听change:myvar。当发生更改时,您可以使用模型的previous()来获取旧值。根据它是增加还是减少,你可以点燃相应的事件。您可以按照initialize()

中的说明收听这些事件
(function($){

    window.MyModel = Backbone.Model.extend({

        initialize: function () {
            this.on('change:myvar', this.onMyVarChange);
            this.on('increased:myvar', function () {                  
                console.log('Increased');                
            });
            this.on('decreased:myvar', function () {                  
                console.log('Decreased');                
            });
        },

        onMyVarChange: function () {
            if (this.get('myvar') > this.previous('myvar')) {
                this.trigger('increased:myvar');  
            } else {
                this.trigger('decreased:myvar');
            }
        }            
    });

    window.mymodel = new MyModel({myvar: 1});
    mymodel.set({myvar: 2});
    mymodel.set({myvar: 3});
    mymodel.set({myvar: 1});

})(jQuery);​

运行上述内容会将“增加”,“增加”,“减少”打印到您的控制台。

答案 1 :(得分:2)

只需查看previousAttributes()

即可

然后你可以比较:

If(this.get(attr) > this.previousAttributes()[attr]){
    console.log('bigger');
} else {
    console.log('smaller');
}

如果您在change事件处理程序中使用它,那么您已经完成了设置。无需自定义触发器或大量代码。

修改

这来自我的Backbone.Validators项目以及如何获取在验证步骤中已更改的所有属性的列表:

var get_changed_attributes = function(previous, current){
    var changedAttributes = [];
    _(current).each(function(val, key){
        if(!_(previous).has(key)){
            changedAttributes.push(key);
        } else if (!_.isEqual(val, previous[key])){
            changedAttributes.push(key);
        }
    });
    return changedAttributes;
};

这需要Underscore 1.3.1,因为它使用的是_.has。如果你不能升级,那么很容易替换。在您的情况下,您要传递this.previousAttributes()this.attributes

答案 2 :(得分:0)

如果您在收听更改事件后触发自己的自定义事件会怎样?

handler: function(increased) {
   this.model.trigger('my-custom-event', stuff, you, want);
},
myHandler: function(stuff, you, want){
    // Do it...
}
// ...
this.model.on("change:attr", this.handler, this);
this.model.on('my-custom-event, this.myHandler, this);