backbone js学习笔记之第二篇Model层

一.概念

引用我参考的御剑神兵关于Model层中的描述：

Model是Backbone中所有数据模型的基类，用于封装原始数据，并提供对数据进行操作的方法，我们一般通过继承的方式来扩展和使用它。

　　如果你做过数据库开发，可能对ORM（对象关系映射）不会陌生，而Backbone中的Model就像是映射出来的一个数据对象，它可以对应到数据库中的某一条记录，并通过操作对象，将数据自动同步到服务器数据库。（下一节即将介绍的Collection就像映射出的一个数据集合，它可以对应到数据库中的某一张或多张关联表）

二.实例化

无论是Model层还是View，Collection，对象的创建和实例化无非两种方式：直接new 或者使用extend方法扩展并实例化该类。

如下是一个实例化Model的示例：

// 使用extend方法
var Book=Backbone.Model.extend({
  defaults:{
    name:'xhtml+css 权威指南',
    author:'Eric Meyer'
  }
});
var book=new Book();
alert('book name is:'+book.get('name')+',book author is:'+book.get('author'));

// 使用new方法
var book=new Backbone.Model({
    name:'xhtml+css 权威指南',
    author:'Eric Meyer'
});
alert('book name is:'+book.get('name')+',book author is:'+book.get('author'));

使用extend方法时，支持默认参数设置。建议在编程时，如果使用extend方法，请传入default对象，这是一个良好的编程习惯。

三.其他操作

一个对象被创建后，我们要做的事情通常就是对它的属性和方法进行操作。

1.获取属性

我们先将book这个对象在控制台输出，看看它都包含了哪些属性和方法。

由此可见，实例化的每个model都有changed和attributes对象，还有cid属性。我们如果要获取对象的属性，可以这么操作：

//获取name属性
book.attributes.name;
//获取自动生成的cid属性
book.cid;

这样看起来不是很舒服啊，搞过java的童鞋都知道get/set方法，backbone这样的MVC框架，自然也是优雅过分啊，所以，我们建议这么操作：

• 使用get，例如:book.get('name');
• 使用escape方法，同get。不同的是，使用该方法会进行转义处理，防止xss攻击。例：book.escape('name');

 另一方面的原因则在于：模型中数据状态的变化会触发一系列事件、同步等动作，直接操作attributes中的数据可能导致对象状态异常。更安全的做法是：通过get()或escape()方法读取数据，通过set()等方法操作数据。

 2.设置属性

设置使用set方法。Model对象的cid属性是无法重置的。示例如下：

var book=new Backbone.Model({
    name:'xhtml+css 权威指南',
    author:'Eric Meyer'
});
console.log('更改之前------------');
console.log(book.attributes.name);
console.log(book.cid);
//重新设置属性
book.set({
  name:'xiaoxin',
  author:'wahahah'
});
//更改cid属性
book.set('cid','c22222');
console.log('更改之后------------');
console.log(book.attributes.name);
console.log(book.cid);

 以上的代码设置包括了一次对象属性重置。那么重置了对象属性，相当于更改了Model的数据，Model对象如何监测到数据被更改了呢？

答案就是，model对象的change事件。

示例代码：

var book=new Backbone.Model({
    name:'xhtml+css 权威指南',
    author:'Eric Meyer',
    showInformation:function(){
      alert('书籍：'+this.name+'，作者：'+this.author);
    }
});
//调用change
book.on('change',function(model){
  alert('尼玛，属性被改了');
});
//监测各个属性及方法
book.on('change:name',function(model,value){
  alert('尼玛，name属性被更改了');
});
book.on('change:author',function(model,value){
  alert('尼玛，author属性被更改了');
});
book.on('change:showInformation',function(model,value){
  alert('尼玛，showInformation 方法被更改了');
});
// 重置book对象的属性和方法
book.set({
  name:'xiaoxin',
  author:'wahahah',
  showInformation:function(){
    alert('.....help~~~~');
  }
});
// 调用showInformation 方法
book.get('showInformation')();

这里，我在code代码的时候，发现一些需要注意的地方。

1. change监测代码应当在对象属性/方法重置代码之前定义，否则就监测失效。
2. change回调函数有两个参数，第一个默认是model对象，第二个则是当前改变的属性。这个在官方文档示例上没看到。
3. 没有命名空间的change事件会在其他有命名空间的change事件之后触发。

3.获取对象更改前一次的属性/方法(或者整个对象)。

backbone提供了两个方法分别实现此要求。model.previous(attr),model.previousAttributes()。示例如下：

//价格监测
book.on('change:price',function(model,value){
  //获取更改前一次的model的price属性
  var previousPrice=model.previous('price');
  //打印更改的前一次的model
  console.log(model.previousAttributes());
  if(previousPrice<value){
    alert('尼玛，涨价了');
  }
});
book.set({
  name:'xiaoxin',
  author:'wahahah',
  price:60,
  showInformation:function(){
    alert('.....help~~~~');
  }
});

 注意，若是没有设置为book传入另一个对象{silent:true}，那么model.previous(attr),model.previousAttributes()应当放在change的回调函数中才能生效。