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');
}
});