[Java教程]移動前端開發中的Backbone之一：Backbone中的模型和集合

0 2015-09-24 17:00:04

當我們開發含有大量Javascript的web應用程序時，首先你需要做的事情之一便是停止向DOM對象附加數據。 通過復雜多變的jQuery選擇符和回調函數很容易創建Javascript應用程序，包括在HTML UI，Javascript邏輯和數據之間保持同步，都不復雜。 但對富客戶端應用來說，良好的架構通常是有很多益處的。

通過Backbone，你可以將數據呈現為?Models, 你可以對模型進行創建，驗證和銷毀，以及將它保存到服務器。 任何時候只要UI事件引起模型內的屬性變化，模型會觸發"change"事件； 所有顯示模型數據的Views會接收到該事件的通知，繼而視圖重新渲染。

一、Model簡介

Model是任何JavaScript應用的核心，包括數據交互及與其相關的大量邏輯：轉換、驗證、計算屬性和訪問控制。

1、Model的建立：1 　var Model=Backbone.Model.extend({2 defaults:{3 name:"Cowen",4 age:285 }6 });7 var model=new Model();

2、defaults默認屬性：

在model中我們可以使用defaults來建立模型層中的默認屬性，這些屬性在模型層中使用attributes集合進行遍歷。1 var Model=Backbone.Model.extend({2 defaults:{3 name:"Cowen",4 age:285 }6 });7 var model=new Model();8 console.log(model.attributes)//Object {name: "Cowen", age: 28}

3、initialize初始化：

Initialize使用在模型初始化之后，一般可以用于事件的綁定。1 var Model=Backbone.Model.extend({ 2 defaults:{ 3 name:"Cowen", 4 age:28 5 }, 6 initialize:function(){ 7 console.log('初始化'); 8 } 9 });10 var model=new Model();

4、Model的讀值get和賦值set：

模型在讀取屬性值和賦值時分別使用get和set方法，其中get直接讀取屬性值名稱，set則是利用json對的形式進行賦值。get取值時一定要確定model中是否已存在該屬性值，而set賦值則有可能是賦新值也有可能是替換默認值。var Model=Backbone.Model.extend({ defaults:{ name:"Cowen", age:28 } }); var model=new Model(); model.set({'name':"鄭昊"});//替換默認值 model.set({'sex':"male"});//賦新值 console.log(model.attributes);//Object {name: "鄭昊", age: 28, sex: "male"}

5、has方法：

模型中的has()方法主要是用來判讀模型中是否存在指定的屬性值。返回的是一個布爾類型的數據。var Model=Backbone.Model.extend({ defaults:{ name:"Cowen", age:28 } }); var model=new Model(); console.log(model.has("sex"));//false

6、validate校驗：

Backbone繼承自underscore.js中的validate方法，用來在執行invalid事件時會觸發validate的檢驗。在對model進行屬性賦值時，我們可以使用isvalid()來檢驗set的屬性值是否符合validate校驗。1 var Model=Backbone.Model.extend({ 2 validate:function(attributes){ 3 if(attributes.age<18){ 4 return "您未滿18周歲"; 5 } 6 If(attributes.age>60){ 7 return "您的年齡太大" 8 } 9 }10 });11 var model=new Model();12 model.set({'age':40});13 console.log(model.isValid());//true

如果我們需要顯示出validate校驗返回的錯誤提示，則這個時候我們在對屬性值進行set賦值時要手動觸發invalid事件。當然，前提是model在initialize初始化時已經對invalid事件進行了bind綁定。1 var Model=Backbone.Model.extend({ 2 initialize:function(){ 3 this.bind("invalid",function(model,error){ 4 console.log(error); 5 }); 6 }, 7 validate:function(attributes){ 8 if(attributes.age<18){ 9 return "您未滿18周歲";10 }11 if(attributes.age>60){12 return "您的年齡太大";13 }14 }15 });16 var model=new Model();17 model.set({'age':400},{'validate':true});//返回的是"您的年齡太大"

在對model執行save()方法時，也會自動觸發invalid事件，進行validate校驗。1 var Model=Backbone.Model.extend({ 2 initialize:function(){ 3 this.bind("invalid",function(model,error){ 4 console.log(error); 5 }); 6 }, 7 validate:function(attributes){ 8 if(attributes.age<18){ 9 return "您未滿18周歲";10 }11 if(attributes.age>60){12 return "您的年齡太大";13 }14 }15 });16 var model=new Model();17 model.save({'age':17});// 返回的是"您未滿18周歲";

二、Collection簡介

承接上一節我們學習過的Backbone中的模型(Model)，我們不可能使用單個Model來描述業務層中所有的數據類型，需要使用Model的集合Collection來表示有序的集合。

1 //定義模型層--Model 2 var Person=Backbone.Model.extend({ 3 defaults:{ 4 name:'', 5 age:0 6 } 7 }); 8 //定義集合層--Collection 9 var Persons=Backbone.Collection.extend({10 model:Person11 });12 var p1=new Person({name:'cowen'});13 var p2=new Person({name:'zhenghao'});14 var persons=new Persons();15 //將模型層添加到集合層16 persons.add(p1);17 persons.add(p2);

1、model屬性：

制定集合層中的model類型，可以直接在Collection中指定，也可以在創建Collection時再指定。

2、models屬性：

集合在創建后，自動創建一個models屬性，在該屬性中保存著添加到集合中的model數組，我們可以使用該屬性值獲得指定索引位置上的model模型實例。

//定義模型層--Model var Person=Backbone.Model.extend({ defaults:{ name:'', age:0 } }); //定義集合層--Collection var Persons=Backbone.Collection.extend({ model:Person }); var p1=new Person({name:'cowen'}); var p2=new Person({name:'zhenghao'}); var persons=new Persons(); //將模型層添加到集合層 persons.add(p1); persons.add(p2); console.log(persons.models[0].get('name'));//Cowen

3、add()和remove()方法：

使用add()方法可以向collection集合中添加model模型，相反使用remove()方法可以從集合中刪除相應的model。

4、at()方法：

使用at()方法可以獲取指定索引位置的model對象，類似于使用models[index]。

5、where查詢和findwhere查詢：

在collection中可以使用where關鍵字查詢，返回集合中所有匹配所傳遞?attributes(屬性)的模型數組；而findWhere直接返回匹配所傳遞?attributes(屬性)的第一個模型。

1 //定義模型層--Model 2 var Person=Backbone.Model.extend({ 3 defaults:{ 4 name:'', 5 age:0 6 } 7 }); 8 //定義集合層--Collection 9 var Persons=Backbone.Collection.extend({10 model:Person11 });12 var p1=new Person({name:'cowen',age:18});13 var p2=new Person({name:'zhenghao',age:29});14 var p3=new Person({name:'lily',age:30});15 var persons=new Persons();16 //將模型層添加到集合層17 persons.add(p1);18 persons.add(p2);19 persons.add(p3);20 console.log(persons.where({age:29}).length);

本文網址：http://www.shaoqun.com/a/144964.html

*特別聲明：以上內容來自于網絡收集，著作權屬原作者所有，如有侵權，請聯系我們：admin@shaoqun.com。

前端

0

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的java backbone_[Java教程]移动前端开发中的Backbone之一：Backbone中的模型和集合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。