Backbonejs之model

上一篇Backbonejs之router，秀了一下backbone的router的使用。这里在玩一下backbone的model。model可是backbone的核心。

啥是model

前端mvc的感念中，model到底是啥东西呢？见仁见智吧。backbone的作者定义如下：

model是javascript程序的核心，它包括了交互式数据以及相关的逻辑处，比如转换、验证、计算属性和访问控制。

用backbone写一个model简单至极：

var Human = Backbone.Model.extend({    initialize: function(){        alert("Welcome to this world");    }});var human = new Human();

initialize()老套路，backbone中的models, collections 和 views在实例化时候都会自动调用这个函数。

好了，model有了，怎么玩呢？先说说编程环境吧。写一个html页面来加载backbone：

<!-- Backbone.js 依赖jquery和underscore --><script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script><script src="http://cdn.bootcss.com/underscore.js/1.8.0/underscore-min.js"></script><!-- 加载backbone --><script src="http://cdn.bootcss.com/backbone.js/1.2.3/backbone-min.js"></script><script src="http://cdn.bootcss.com/handlebars.js/4.0.0/handlebars.amd.js"></script>

接下来用chrome打开这个页面，按12，进入console。

搞定，环境设置好，下文的代码都可以拷贝到console里面直接运行。

设置attributes

var Human = Backbone.Model.extend({  initialize: function(){      alert("Welcome to this world");  }});var human = new Human({ name: "Thomas", age: 67});// 也可以先实例空human model,然后使用backbone提供的set函数设置atrributesvar human = new Human();human.set({ name: "Thomas", age: 67});

获取attributes

同model.set一样，当然有model.get。

var Human = Backbone.Model.extend({  initialize: function(){      alert("Welcome to this world");  }});var human = new Human({ name: "Thomas", age: 67, child: 'Ryan'});var age = human.get("age"); // 67var name = human.get("name"); // "Thomas"var child = human.get("child"); // 'Ryan'

设置默认值

开发程序，对象或者函数没有默认值，很难受的。在backbone中可以给model的attributes设置默认值。

var Human = Backbone.Model.extend({  defaults: {    name: 'Fetus',    age: 0,    child: ''  },  initialize: function(){    alert("Welcome to this world");  }});var human = new Human({ name: "Thomas", age: 67, child: 'Ryan'});var age = human.get("age"); // 67var name = human.get("name"); // "Thomas"var child = human.get("child"); // 'Ryan'

操作attributes

Model里面可以写一些自定义的函数，来操作attributes。

var Human = Backbone.Model.extend({  defaults: {    name: 'Fetus',    age: 0,    child: ''  },  initialize: function(){    alert("Welcome to this world");  },  adopt: function( newChildsName ){    this.set({ child: newChildsName });  }});var human = new Human({ name: "Thomas", age: 67, child: 'Ryan'});human.adopt('John Resig');var child = human.get("child"); // 'John Resig'

监听model变化

backbone比较有用的一点就是这里。可以给model的attributes绑定监听函数，用来探测他们的值的改变。通常在initialize函数中绑定监听函数。

var Human = Backbone.Model.extend({  defaults: {    name: 'Fetus',    age: 0  },  initialize: function(){    alert("Welcome to this world");    this.on("change:name", function(model){      var name = model.get("name"); // 'Stewie Griffin'      alert("Changed my name to " + name );    });  }});var human = new Human({ name: "Thomas", age: 67});human.set({name: 'Stewie Griffin'}); // This triggers a change and will alert()

同后端server交互

Model通常情况下表示的是server端的data，所以一般要跟server打交道。对Model的一些操作会转换成RESTful操作。
想像一些，server端数据库里有张user表，前端能够通过RESTful URL /user来同它交互。
现在定义model如下：

var UserModel = Backbone.Model.extend({  urlRoot: '/user', // 通过restful url对应到server端的user model  defaults: {      name: '',      email: ''  }});

新建model

如果在server端建一个新user，需要前端model（即上面定义的UserModel）调用save函数。如果model中没有id attribute，backbone会发送一个post请求到server端的urlRoot上。

var UserModel = Backbone.Model.extend({    urlRoot: '/user',    defaults: {        name: '',        email: ''    }});var user = new UserModel();// 注意没有 `id`var userDetails = {    name: 'Thomas',    email: '[e-mail]'};// 由于没有`id`,所以post /user// post payload： {name:'Thomas', email: '[e-mail]'}// server 端保存成功后相应前端，新的user带有新的 `id`user.save(userDetails, {    success: function (user) {        alert(JSON.stringify(user));    }})

获取model

前端model指明id，获取后端对应model。

// 指明`id`var user = new UserModel({id: 1});// 使用fetch方法，发出get /user/1 请求。user.fetch({    success: function (user) {        alert(JSON.stringify(user));    }})

更新model

// 指明idvar user = new UserModel({  id: 1,  name: 'Thomas',  email: '[e-mail]'});// 既然指定了id，那么调用save函数就会发出 put PUT /user/1 请求。// 对应的payload： {name: 'Davis', email: '[e-mail]'}user.save({name: 'Davis'}, {  success: function (model) {    alert(JSON.stringify(user));  }});

删除model

var user = new UserModel({  id: 1,  name: 'Thomas',  email: '[e-mail]'});// 调用destroy， 发delete请求// DELETE /user/1 user.destroy({  success: function () {    alert('Destroyed');  }});