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

本文内容接上篇博客内容

模型事件

虽然在本书的后面会讲解事件，但一个特殊的事件对于模型来说非常重要，那就是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	返回模型中所有改变的属性的全局

本篇内容翻译自《Beginning Backbone.js》，原著作者James
Sugrue。