微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

详解Backbone.js框架中的模型Model与其集合collection

什么是 Model

Backbone 的作者是这样定义 Model 的:

Model 是任何一个 web 应用的核心,它包含了交互的数据以及大部分的逻辑。例如:转化、验证、属性和访问权限等。 那么,我们首先来创建一个Model:

rush:js;"> 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 的属性

rush:js;"> 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() 方法,我们可以获得属性

rush:js;"> 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 属性来实现:

rush:js;"> 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)

rush:js;"> Person = Backbone.Model.extend({ defaults: { name: "LebronJames",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 为例:

rush:js;"> Person = Backbone.Model.extend({ defaults: { name: "LebronJames",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 定义为:

rush:js;"> var usermodel = Backbone.Model.extend({ urlRoot: '/user',defaults: { name: '',email: '' } });

创建一个 Model

Backbone 中每个 Model 都拥有一个属性 id,它与服务器端数据一一对应。如果我们希望在服务器端的 MysqL 表 user 中新增一条记录,我们只需要实例化一个 Model,然后调用 save() 方法即可。此时 Model 实例的属性 id 为空,即说明这个 Model 是新建的,因此 Backbone 将会向指定的 URL 发送一个 POST 请求。

rush:js;"> var usermodel = Backbone.Model.extend({ urlRoot: '/user',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 请求。

rush:js;"> 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 请求。

rush:js;"> 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 操作。

rush:js;"> var user = new usermodel({ id: 1,email: 'stephen.lee@mencoplatform.com' });//实例化时指定 id 值

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

什么是 Collection

简而言之,Backbone 中的 Collection 就是 Model 的一个有序集合,比如,它可能会在以下情况中用到:

rush:plain;"> Model: Student,Collection: Classstudents Model: Todo Item,Collection: Todo List Model: Animal,Collection: Zoo

Collection 一般只使用同一类型的 Model,但是 Model 可以属于不同类型的 Collection,比如:

rush:plain;"> Model: Student,Collection: Gym Class Model: Student,Collection: Art Class Model: Student,Collection: English Class

创建一个 Collection

rush:js;"> //定义 Model Song var Song = Backbone.Model.extend({ defaults: { name: "Not specified",artist: "Not specified" },initialize: function(){ console.log("Music is the answer"); } });

//定义 Collection Album
var Album = Backbone.Collection.extend({
model: Song //指定 Collection 内的 Model 为 Song
});

var song1 = new Song({ name: "How Bizarre",artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing",artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In bed",artist: "OMC" });

var myAlbum = new Album([ song1,song2,song3]);
console.log( myAlbum.models ); // 输出为 [song1,song3]

原文地址:https://www.jb51.cc/js/48993.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐