《开始学Backbone.js》之第三章Backbone Models与Collections（四）

      本篇内容翻译自《Beginning Backbone.js》，原著作者James Sugrue。转载请注明相关信息。

 

      本文内容接上篇博客内容

 

   模型事件

      虽然在本书的后面会讲解事件，但一个特殊的事件对于模型来说非常重要，那就是change事件，当某个属性的值或一组属性值发生变化时会触发change事件。

 

   监听change事件

      Backbone中change事件的监听，是监听整个模型变化最简单的方法。事件监听通过使用.on()方法添加到Backbone对象上，该方法接受两个参数，一个是字符串表示的事件类型，另一个是change事件发生时要执行的函数引用。

 

      创建该事件监听的最佳时机是在模型的initialize函数中。通过修改你当前的代码，你会看到每当调用set方法时，事件处理函数总会被执行。

Book = Backbone.Model.extend({
    initialize: function(){
        this.on('change', function(){
            console.log('Model Changed');
        });
    },
    defaults: {
        name: 'Book Title',
        author: 'No One'
    },
    printDetails: function(){
        console.log(this.get('name') + ' by ' + this.get('author'));
    }
});

 

      你可以通过使用change:<属性名>的形式监听特定属性的change事件，而不是简单的监听change事件。下面增加的代码创建了另一个监听函数以只监听name属性的change事件：

initialize: function(){
    this.on('change', function(){
        console.log('Model Changed');
    });
    this.on('change:name', function(){
        console.log('The name attribute has changed');
    });
}

 

      在前面说到.set方法可以接受一个可选的参数用以表明是否触发静默更新，如果使用了该方法，那么上面的change处理函数将不会被调用。

//设置变量（期望触发change处理函数）
thisBook.set('name', 'Different Book');  //change 处理函数被调用
thisBook.set('name', 'Different Book', {silent: true});  //没有change处理函数会被调用

 

   确定什么发生了变化

      Backbone中包含了一些属性来跟踪模型中哪些属性发生了变化。如果使用全局的change监听函数，可以非常实用地看到发生的变化。

 

      使用hasChanged('<属性名>')可以检查某个属性是否发生了变化。

this.on('change', function(){
    console.log('Model Changes Detected:');
    if(this.hasChanged('name')){
        console.log('The name has changed');
    }
    if(this.hasChanged('year')){
        console.log('The year has changed');
    }
});

 

      使用.changed属性可以获得所有发生变化的属性集合。

Book = Backbone.Model.extend({
    initialize: function(){
        this.on('change', function(){
            console.log('Changed attributes: ' + JSON.stringify(this.changed));
        });
    }
});

 

      使用.previousAttributes()方法还可以获得所有属性改变前的状态结合。

console.log('Previous attributes: ' + JSON.stringify(this.previousAttributes()));

 

      最后，通过.previous('<属性名>')可以获取某个特定属性改变前的值。

if(this.hasChanged('name')){
    console.log('The name has changed from ' + this.previous('name') + ’ to ' + this.get('name'));
}

 

   属性改变指南

      表3-2描述了模型中与属性改变相关的常用操作。

      

      表3-2 Backbone模型中属性改变相关方法

操作	描述
.on('change', <function>)	提供一个全局的change事件监听，能够响应模型中任何属性的变化
.on('change:<属性名>', <function>)	监听某个具体属性的change事件
.hasChanged(<attribute name>)	如果属性在上一次change事件中发生了改变则返回true
.previous(<属性名>)	返回某个具体属性改变前的值
.changed	返回模型中所有改变的属性的全集