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

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 的记录。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzppwd.html