backbone学习笔记(3)- Model

Posted by luoway on November 21, 2015

使用Model.extend()创建模型

1.创建一个简单的模型

var Student = Backbone.Model.extend({
	initialize: function(){
		intNum++;
		console.log("您构建了"+ intNum + "个对象");
	}
});
var intNum = 0;
var stuA = new Student();
var stuB = new Student();

过程描述为:创建构造器,并将构造器实例化。
Model的构造器为函数,内容则是JSON格式。原理简例如下:

var A = {
    say: "This is A"
};
function F(){}
F.prototype = A;
var c = new F();

2.对象模型赋值、取值的方法

  • Obj.set( attrName, attrValue )
  • Obj.set( { attrName1: attrValue1, attrName2: attrValue2, ... } )
  • Obj.get( attrName ) 获取对象属性值
  • Obj.escape( attrName ) 获取对象属性值,并将属性值中的HTML代码转换成字符串实体。

3.自定义模型中的方法
为构造器添加方法,构造器的实例即有了该方法。

4.监听对象属性值变化
在initialize方法中添加监听事件:

initialize: function(){
    this.on("eventName",function(){...});    
}

模型对象操作

1.读取数据 get()escape();

2.修改数据

  • 实例化时直接给默认的属性名赋值
  • 使用set()

3.开启数据验证

  • 添加validate方法
  • 绑定对象invalid事件
  • 使用set()添加/修改属性时,必须将validate属性值设置为true,以进行验证

举例如下:

var student = Backbone.Model.extend({
    //...
    validate: function(attrs){
        if(!_.isString(attrs.Name)) return '姓名必须是字符!';
        if(!_.isNumber(attrs.Score)) return '分数必须是数字!';
    }
});
//...
var stuE = new student();
stuE.set({
    Code:"10105",
    Name:"12345",
    Score:600
},{"validate":true});

未通过验证的set()无效,全部数据都不会改变。

4.关闭数据验证

  • 调用set()时不设置validate属性值为true
  • 调用set()时将silent属性值设置为true,表示静默式修改数据,不触发任何事件(包括监听事件)。

5.更新数据回滚
静默修改数据后,可以进行第二次验证,验证不通过可使用previous()方法获得最近一次修改前的数据。

6.删除数据

  • Obj.unset(attrName) 删除指定属性名称的数据
  • Obj.clear() 清除对象中的全部数据

删除数据后仍然可以使用previous()获得先前的数据,即备份的数据不会被删除。

对象属性操作

1.attributes对象
实例化后的模型对象所有属性都保存在一个名为attributes的对象中。

调用attributes对象获取全部的属性值:Obj.attributes,该值为一个包含实例对象所有属性的对象。

console.log(stuE.attributes);

等价于

console.log(stuE.toJSON());

2.previous和previousAttributes方法

  • Obj.previous(attrName) 返回对象在修改之前的指定属性的值。
  • Obj.previousAttributes() 返回一个对象,包含上一个状态的全部数据。

这两种方法都必须在使用set()重置数据后使用,否则返回异常。

3.set方法的内部顺序
查看Backbone.js源代码可知:

var Model = Backbone.Model = function(attributes, options) {
    var attrs = attributes || {};
    options || (options = {});
    this.cid = _.uniqueId(this.cidPrefix);
    this.attributes = {};
    if (options.collection) this.collection = options.collection;
    if (options.parse) attrs = this.parse(attrs, options) || {};
    attrs = _.defaults({}, attrs, _.result(this, 'defaults'));
    this.set(attrs, options);
    this.changed = {};
    this.initialize.apply(this, arguments);
};

//省略部分源码

_validate: function(attrs, options) {
    if (!options.validate || !this.validate) return true;
    attrs = _.extend({}, this.attributes, attrs);
    var error = this.validationError = this.validate(attrs, options) || null;
    if (!error) return true;
    this.trigger('invalid', this, error, _.extend(options, {validationError: error}));
    return false;
}
  • 实例化后模型对象的属性值都存储在this.attributes
  • 调用set()时,会检测第一个参数key是否是对象,是则直接赋值给this.attributes,否则将获取的key和value值生成一个临时的attrs对象,再将该对象赋值给this.attributes
  • validate属性值设置为true并且模型实现了this.validate方法时,将调用数据验证,否则直接返回true
  • 验证失败,不会执行change事件

内部顺序为:

  1. key或value生成attrs对象
  2. 初始化options对象
  3. 调用_validate方法执行验证
  4. 调用unset方法删除属性
  5. 执行静默方式重置数据

同步数据到服务器

1.save()

A. 使用save()发送数据

  • 在模型中添加一个用于指定服务器请求地址的url属性和值。
  • 调用set()重置一次模型对象的属性值
  • 调用save()进行数据发送,数据发送方式为POST,发送格式为JSON,内容为set()重置的属性值

B. 使用save()接收返回值

在发送数据的基础上,为save()添加参数。

stuE.save(null, {
    success: function(model, response){
        console.log( response.toJSON() ); //返回数据存储在对象response中
    }
});

还可以添加error函数,当服务器返回错误时执行。

C. 使用save()时设置wait属性
save({setValue},{success: function(){}, wait: true})

  • save()的第一个参数对象可直接重置数据。
  • save()的第二个参数添加wait属性,当wait属性值为true时,将会调用validate方法对发送数据的有效性进行验证,没有通过验证将不会向服务器发送数据,并回滚到执行save()前的数据。发送失败也将回滚数据。

2.fetch()
使用fetch()获取服务器数据:

  • 设置url
  • 实例化一个模型对象,调用该对象的fetch方法,添加该方法的两个回调函数successerror

采用GET方式请求数据,成功获取到的数据会重置于模型对象中。

3.destory()
DELETE请求方式向服务器发送对象的ID数据。
也可以配置对象添加successerror函数,或将wait属性值设置为true

  • 设置url,添加idAttribute属性指定ID对应的属性名称
  • 实例化一个模型对象,调用该对象的destroy方法。