Backbone.js学习之Model

首先，我们看一下官方文档中对Model的解释（或者说定义）：

Models are the heart of any javaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed PRoperties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.

翻译成中文就是：

Model是js应用的核心，包括交互数据以及围绕着这些数据的大部分逻辑：数据转换、验证、属性计算和访问控制。你可以使用特定方法来扩展Backbone.Model，并且Model本身就提供了一系列基本的管理功能。

然后，我们还在文档中看到Model拥有好多方法，这里就不一一介绍了。

简单的Model例子

定义了一个最基础的Model，只是实现了initialize这个初始化方法。这个函数会在Model被实例化时调用。

var Man = Backbone.Model.extend({        constructor: function(){            alert('Hey, you create me!');        }         });        var man = new Man;

初始化函数，也可以叫构造函数。比如你这里完全可以把constructor写成initialize，效果是一样的。至于为什么一样？这还得等到熟悉这个框架过后看看Backbone源码才能知道。

Molde对象属性赋值的两种方法

一种是设置默认值

        var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');        },        defaults: {            name:'张三',            age: '38'        }    });    var man = new Man;    console.info(man.get("name"));

或者这样赋值

    man.set({name:'the5fire',age:'10'});    console.info(man.get("name"));    console.info(man);

从这个对象的取值方式可以知道，属性在一个Model是以字典（或者类似字典）的方式存在的，第一种设定默认值的方式，只不过是实现了Backbone的defaults这个方法，或者是给defaults进行了赋值。通过打印出man这个对象，我们可以发现，属性是存在一个叫做attributes的对象中的。

Model对象中的方法

var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');        },        defaults: {            name:'张三',            age: '38'        },        aboutMe: function(){            return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';        }    });    var man = new Man;    alert(man.aboutMe());

也是比较简单，只是增加了一个新的属性，值是一个function。说到这，不知道你是否发现，在所有的定义或者赋值操作中，都是通过字典的方式来完成的，比如extend Backbone的Model，以及定义方法，定义默认值。方法的调用和其他的语言一样，直接 "." 即可，参数的定义和传递也一样。

监听Model对象中属性的变化

假设你有在对象的某个属性发生变化时去处理一些业务的话，下面的示例会有帮助。依然是定义那个类，不同的是我们在构造函数中绑定了name属性的change事件。这样当name发生变化时，就会触发这个function。

var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');            //初始化时绑定监听            this.bind("change:name",function(){                var name = this.get("name");                alert("你改变了name属性为：" + name);            });        },        defaults: {            name:'张三',            age: '38'        }    });    var man = new Man;    //触发绑定的change事件，alert。    man.set({name:'the5fire'});    //触发绑定的change事件，alert。    man.set({name:'the5fire.com'});

为Model对象添加验证规则，以及错误提示

var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');            //初始化时绑定监听, change事件会先于validate发生            this.bind("change:name",function(){                var name = this.get("name");                alert("你改变了name属性为：" + name);            });            this.bind("invalid",function(model,error){                alert(error);            });        },        defaults: {            name:'张三',            age: '38'        },        validate:function(attributes){            if(attributes.name == '') {                return "name不能为空！";            }        }    });    var man = new Man;    // 这种方式添加错误处理也行    // man.on('invalid', function(model, error){    //         alert(error);    // });    //默认set时不进行验证    man.set({name:''});    //save时触发验证。根据验证规则，弹出错误提示。    man.save();    //手动触发验证, set时会触发    man.set({name:'moyi'}, {'validate':true});    //验证通过时信息    if (man.isValid()) {  alert(man.get("name")+"验证通过");}

和服务器进行交互，Model对象的保存和获取

由于本人比较懒，这里就暂时不去折腾服务器了。交互数据这些东西就用jquery-mockjax模拟一下得了（PS：前面有写过一篇关于mockjax的文章）。

这里Ajax请求模拟

var isAjaxMocked = true;if (isAjaxMocked) {    $.mockjax({        url: '/man/read',        status: 200,        type: "get",        responseTime: 100,        responseText: {'name': 'Moyi', 'age': '1111'}    });    $.mockjax({        url: '/man/update',        status: 200,        type: "post",        responseTime: 100,        responseText: {'name': 'qianlan', 'age': '11'}    });}

        // 和服务器进行交互，对象的保存和获取        var Man = Backbone.Model.extend({        url:'/man/update',        initialize: function(){            console.log('Hey, you create me!');            //初始化时绑定监听            this.bind("change:name",function(){                var name = this.get("name");                console.log("你改变了name属性为：" + name);            });            this.bind("error",function(model,error){                console.log(error);            });        },        defaults: {            name:'张三',            age: '38'        },        validate:function(attributes){            if(attributes.name == '') {                return "name不能为空！";            }        },        aboutMe: function(){            return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';        }    });    var man = new Man;;    man.set({name:'the5fire'});    //会发送POST到模型对应的url，数据格式为json{"name":"the5fire","age":38}    // man.save();    man.save({"name":"the5fire","age":38},{url:'/man/update',        success:function(model,response){            console.log('success');            //model为获取到的数据            console.log(model.get('name')+" and "+model.get('age'));        },error:function(){            //当返回格式不正确或者是非json数据时，会执行此方法            console.log('error');        }    });    //然后接着就是从服务器端获取数据使用方法fetch([options])    var man1 = new Man;    //第一种情况，如果直接使用fetch方法，    //那么他会发送get请求到你model的url中，    //你在服务器端可以通过判断是get还是post来进行对应的操作。    // man1.fetch();    //第二种情况，在fetch中加入参数，如下：    // man1.fetch({url:'/man/read'});    //这样，就会发送get请求到/getmans/这个url中，    //服务器返回的结果样式应该是对应的json格式数据，同save时POST过去的格式。    //不过接受服务器端返回的数据方法是这样的：    man1.fetch({url:'/man/read',        success:function(model,response){            console.log('success');            //model为获取到的数据            console.log(model.get('name')+" and "+model.get('age'));        },error:function(){            //当返回格式不正确或者是非json数据时，会执行此方法            console.log('error');        }    });

Model部分暂时就到这里，总的来说，Model就是对数据以及和数据有关的逻辑的一些处理。