认识 Backbone（一） : 什么是 Model

Backbone 的做者是这样定义 Model 的：

Model 是任何一个 web 应用的核心，它包含了交互的数据以及大部分的逻辑。例如：转化、验证、属性和访问权限等。

那么，咱们首先来建立一个Model：

Person = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to Backbone!");
    }
});

var person = new Person;

上述代码中，咱们定义了一个名为 Person 的 Model,实例化后，获得 person。任什么时候候当你实例化一个 Model，都会自动触发 initialize() 方法（这个原则一样适用于 collection, view）。固然，定义一个 Model 时，并不是强制要求使用 initialize() 方法，可是随着你对 Backbone 的使用，你会发现它不可或缺。

设置 Model 属性

如今咱们想在建立 Model 实例时传递一些参数用来设置 Model 的属性：

Person = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to Backbone!");
    }
});

//在实例化 Model 时直接设置
var person = new Person({ name: "StephenLee", age: 22 });

//咱们也能够在 Model 实例化后，经过 set() 方法进行设置
var person = new Person();
person.set({ name: "StephenLee", age: 22});

得到 Model 属性

使用 Model 的 get() 方法，咱们能够得到属性：

Person = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to Backbone!");
    }
});

var person = new Person({ name: "StephenLee", age: 22});

var age = person.get("age"); // 22
var name = person.get("name"); // "StephenLee"

设置 Model 默认属性

有时你但愿 Model 实例化时自己就包含一些默认的属性值，这个能够经过定义 Model 的 defaults 属性来实现：

Person = Backbone.Model.extend({
    defaults: {
        name: "LebronJames",
        age: 30,
    },
    initialize: function(){
        alert("Welcome to Backbone!");
    }
});

var person = new Person({ name: "StephenLee"});

var age = person.get("age"); // 由于实例化时未指定 age 值，则为默认值 30
var name = person.get("name"); //实例化制定了 name 值，则为 "StephenLee"

使用 Model 属性

你能够在 Model 中自定义方法来使用 Model 内的属性。（全部自定义的方法默认为 public）

Person = Backbone.Model.extend({
    defaults: {
        name: "LebronJames",
        age: 30,
        hobby: "basketball"
    },
    initialize: function(){
        alert("Welcome to Backbone!");
    },
    like: function( hobbyName ){
        this.set({ hobby: hobbyName });
    },
});

var person = new Person({ name: "StephenLee", age: 22});

person.like("coding");// 设置 StephenLee's hobby 为 coding
var hobby = person.get("hobby"); // "coding"

监听 Model 属性的改变

根据 Backbone 的机制，咱们能够给对 Model 的任意属性进行监听，接下来，咱们尝试在 initialize() 方法中绑定 Model 一个的属性进行监听，以属性 name 为例：

Person = Backbone.Model.extend({
    defaults: {
        name: "LebronJames",
        age: 30,
    },
    initialize: function(){
        alert("Welcome to Backbone!");
        this.on("change:name", function(model){
            var name = model.get("name"); // 'KobeBryant'
            alert("Changed my name to " + name );
        });
    }
});

var person = new Person();

var age = person.set({name : "KobeBryant"});

经过上述代码，咱们知道了如何对 Model 的某个属性进行监听。假设咱们须要对 Model 全部的属性进行监听，则使用 'this.on("change", function(model){}); 。

服务器与 Model 的数据交互

前文中已提到 Model 包含了交互的数据，因此它的做用之一即是承载服务器端传来的数据，并与服务器端进行数据交互。如今咱们假设服务器端有一个 mysql 的表 user,该表有三个字段 id, name, email 。服务器端采用 REST 风格与前端进行通讯，使用 URL：/user 来进行交互。咱们的 Model 定义为：

var UserModel = Backbone.Model.extend({
    urlRoot: '/user',
    defaults: {
        name: '',
        email: ''
    }
});

建立一个 Model

Backbone 中每一个 Model 都拥有一个属性 id，它与服务器端数据一一对应。若是咱们但愿在服务器端的 mysql 表 user 中新增一条记录，咱们只须要实例化一个 Model，而后调用 save() 方法便可。此时 Model 实例的属性 id 为空，即说明这个 Model 是新建的，所以 Backbone 将会向指定的 URL 发送一个 POST 请求。

var UserModel = Backbone.Model.extend({
    urlRoot: '/user',
    defaults: {
        name: '',
        email: ''
    }
});

var user = new Usermodel();
//注意，咱们并无在此定义 id 属性
var userDetails = {
    name: 'StephenLee',
    email: 'stephen.lee@mencoplatform.com'
};

//由于 model 没有 id 属性，因此此时使用 save() 方法，Backbone 会向服务器端发送一个 POST 请求，服务器端收到数据后，将其存储，并返回包含 id 的信息给 Model
user.save(userDetails, {
    success: function (user) {
        alert(user.toJSON());
    }
})

此时，在服务器端 mysql 的 user 表里多了一条 name 为 StephenLee,email 为 stephen.lee@mencoplatform.com 的记录。

取得一个 Model

刚刚咱们已经建立了一个 Model，并将它存储到了服务器端的数据库中，假设建立 Model 时，服务器端返回的 id 属性值为 1，此时，咱们经过 id 的值就能够将已存储的数据取回。当咱们用 id 属性值初始化一个 Model 实例时，经过 fetch() 操做，Backbone 将会向指定的 URL 发送一个 GET 请求。

var user = new Usermodel({id: 1});//初始化时指定 id 的值

//利用 fetch() 方法将会向 user/1 请求数据，服务器端将会返回完整的 user 记录，包含 name,email 等信息
user.fetch({
    success: function (user) {
        alert(user.toJSON());
    }
})

更新一个 Model

若是咱们须要对已经存储的 user 记录进行修改，利用已知的 id 值，一样使用 save() 方法，但由于此时 id 不为空，Backbone 将会向指定的 URL 发送一个 PUT 请求。

var user = new Usermodel({
    id: 1,
    name: 'StephenLee',
    email: 'stephen.lee@mencoplatform.com'
});//实例化时指定 id 值

//由于指定了 id 值，此时使用 save() 方法，Backbone 将会向 user/1 发送 PUT 请求，将会对数据库中 id 为1的记录的 email 修改
user.save({email: 'newemail@qq.com'}, {
    success: function (model) {
        alert(user.toJSON());
    }
});

删除一个 Model

若是咱们须要删除数据库中的记录，利用已知的 id 值，使用 destroy() 方法便可。此时，Backbone 将会向指定的 URL 发送一个 DELETE 操做。

var user = new Usermodel({
    id: 1,
    name: 'StephenLee',
    email: 'stephen.lee@mencoplatform.com'
});//实例化时指定 id 值

//由于指定了 id 值，此时使用 destroy() 方法，Backbone 将会向 user/1 发送 DELETE 请求，服务器端接收请求后，将会在数据库中删除 id 为 1的数据
user.destroy({
    success: function () {
        alert('Destroyed');
    }
});

参考

http://backbonetutorials.com/what-is-a-model/