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函数设置atrributes
var 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"); // 67
var 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"); // 67
var 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: 'thomasalwyndavis@gmail.com'
};
// 由于没有`id`,所以post /user
// post payload： {name:'Thomas', email: 'thomasalwyndavis@gmail.com'}
// 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

// 指明id
var user = new UserModel({
  id: 1,
  name: 'Thomas',
  email: 'thomasalwyndavis@gmail.com'
});

// 既然指定了id，那么调用save函数就会发出 put PUT /user/1 请求。
// 对应的payload： {name: 'Davis', email: 'thomasalwyndavis@gmail.com'}

user.save({name: 'Davis'}, {
  success: function (model) {
    alert(JSON.stringify(user));
  }
});

删除model

var user = new UserModel({
  id: 1,
  name: 'Thomas',
  email: 'thomasalwyndavis@gmail.com'
});

// 调用destroy， 发delete请求
// DELETE /user/1 
user.destroy({
  success: function () {
    alert('Destroyed');
  }
});