《详解Backbone.js框架中的模型Model与其集合collection_.docx》由会员分享，可在线阅读，更多相关《详解Backbone.js框架中的模型Model与其集合collection_.docx（12页珍藏版）》请在三一文库上搜索。
1、详解Backbone.js框架中的模型Model与其集合collection_ 这篇文章主要介绍了Backbone.js框架中的模型Model与其集合collection,Backbone拥有与传统MVC框架相类似的Model与View结构,需要的伴侣可以参考下 什么是 Model Backbone 的是这样定义 Model 的： Model 是任何一个 web 应用的核心，它包含了交互的数据以及大部分的规律。例如：转化、验证、属性和访问权限等。 那么，我们首先来创建一个Model： Person = Backbone.Model.extend( initialize: function()
2、alert(Welcome to Backbone!); ); var person = new Person; 上述代码中，我们定义了一个名为 Person 的 Model,实例化后，得到 person。任何时候当你实例化一个 Model，都会自动触发 initialize() 方法（这个原则同样适用于 collection, view）。当然，定义一个 Model 时，并非强制要求用法 initialize() 方法，但是随着你对 Backbone 的用法，你会发觉它不行或缺。 设置 Model 属性 现在我们想在创建 Model 实例时传递一些参数用来设置 Model 的属性： Pers
3、on = 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() 方法，我们可以获得属性： P
4、erson = 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 = B
5、ackbone.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 中自定义
6、方法来用法 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); pe
7、rson.like(coding);/ 设置 StephenLees 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() ale
8、rt(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(mo
9、del); 。 服务器与 Model 的数据交互 前文中已提到 Model 包含了交互的数据，所以它的作用之一便是承载服务器端传来的数据，并与服务器端进行数据交互。现在我们假设服务器端有一个 mysql 的表 user,该表有三个字段 id, name, email 。服务器端采纳 REST 风格与前端进行通信，用法 URL：/user 来进行交互。我们的 Model 定义为： var UserModel = Backbone.Model.extend( urlRoot: /user, defaults: name: , email: ); 创建一个 Model Backbone 中每个 Mo
10、del 都拥有一个属性 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 属
11、性 var userDetails = name: StephenLee, email: ; /由于 model 没有 id 属性，所以此时用法 save() 方法，Backbone 会向服务器端发送一个 POST 恳求，服务器端收到数据后，将其存储，并返回包含 id 的信息给 Model user.save(userDetails, success: function (user) alert(user.toJSON(); ) 此时，在服务器端 mysql 的 user 表里多了一条 name 为 StephenLee,email 为 的记录。 取得一个 Model 刚刚我们已经创建了一
12、个 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
13、(user) alert(user.toJSON(); ) 更新一个 Model 假如我们需要对已经存储的 user 记录进行修改，利用已知的 id 值，同样用法 save() 方法，但由于此时 id 不为空，Backbone 将会向指定的 URL 发送一个 PUT 恳求。 var user = new Usermodel( id: 1, name: StephenLee, email: );/实例化时指定 id 值 /由于指定了 id 值，此时用法 save() 方法，Backbone 将会向 user/1 发送 PUT 恳求，将会对数据库中 id 为1的记录的 email 修改 user
14、.save(email: , success: function (model) alert(user.toJSON(); ); 删除一个 Model 假如我们需要删除数据库中的记录，利用已知的 id 值，用法 destroy() 方法即可。此时，Backbone 将会向指定的 URL 发送一个 DELETE 操作。 var user = new Usermodel( id: 1, name: StephenLee, email: );/实例化时指定 id 值 /由于指定了 id 值，此时用法 destroy() 方法，Backbone 将会向 user/1 发送 DELETE 恳求，服务器
15、端接收恳求后，将会在数据库中删除 id 为 1的数据 user.destroy( success: function () alert(Destroyed); ); 什么是 Collection 简而言之，Backbone 中的 Collection 就是 Model 的一个有序集合，比如，它可能会在以下状况中用到: Model: Student, Collection: ClassStudents Model: Todo Item, Collection: Todo List Model: Animal, Collection: Zoo Collection 一般只用法同一类型的 Model
16、，但是 Model 可以属于不同类型的 Collection，比如： Model: Student, Collection: Gym Class Model: Student, Collection: Art Class Model: Student, Collection: English Class 创建一个 Collection /定义 Model Song var Song = Backbone.Model.extend( defaults: name: Not specified, artist: Not specified , initialize: function() cons
17、ole.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, song2, song3 .