Backbone.js框架中Model與Collection的使用實例
Model
關(guān)于backbone，最基礎(chǔ)的一個東西就是model，這個東西就像是后端開發(fā)中的數(shù)據(jù)庫映射那個model一樣，也是數(shù)據(jù)對象的模型，并且應(yīng)該是和后端的model有相同的屬性（僅是需要通過前端來操作的屬性）。
下面就從實例來一步一步的帶大家來了解backbone的model到底是什么樣的一個東西。
首先定義一個html的頁面：
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
/**
*此處填充代碼
**/
})(jQuery);
</script>
</html>
下面的代碼需要填到這個html的script標簽中的function中。
1、最簡單的一個對象
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
}
});
var man = new Man;
這個就很簡單了，在helloworld里面也有了一個model的展現(xiàn)，不定義了屬性，這里是一個 初始化時的方法，或者稱之為構(gòu)造函數(shù)。
2、對象賦值的兩種方法
第一種，直接定義，設(shè)置默認值。
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'張三',
age: '38'
}
});
var man = new Man;
alert(man.get('name'));
第二種，賦值時定義
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
}
});
man.set({name:'the5fire',age:'10'});
alert(man.get('name'));
取值的時候都是用get。
3、對象中的方法
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'張三',
age: '38'
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';
}
});
var man = new Man;
alert(man.aboutMe());
4、監(jiān)聽對象中屬性的變化
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化時綁定監(jiān)聽
this.bind("change:name",function(){
var name = this.get("name");
alert("你改變了name屬性為：" + name);
});
},
defaults: {
name:'張三',
age: '38'
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';
}
});
var man = new Man;
man.set({name:'the5fire'}) //觸發(fā)綁定的change事件，alert。
5、為對象添加驗證規(guī)則，以及錯誤提示
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化時綁定監(jiān)聽
this.bind("change:name",function(){
var name = this.get("name");
alert("你改變了name屬性為：" + name);
});
this.bind("error",function(model,error){
alert(error);
});
},
defaults: {
name:'張三',
age: '38'
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能為空！";
}
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';
}
});
var man = new Man;
man.set({name:''}); //根據(jù)驗證規(guī)則，彈出錯誤提示。
6、對象的獲取和保存，需要服務(wù)器端支持才能測試。
首先需要為對象定義一個url屬性，調(diào)用save方法時會post對象的所有屬性到server端。
Man = Backbone.Model.extend({
url:'/save/',
initialize: function(){
alert('Hey, you create me!');
//初始化時綁定監(jiān)聽
this.bind("change:name",function(){
var name = this.get("name");
alert("你改變了name屬性為：" + name);
});
this.bind("error",function(model,error){
alert(error);
});
},
defaults: {
name:'張三',
age: '38'
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能為空！";
}
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';
}
});
var man = new Man;;
man.set({name:'the5fire'});
man.save(); //會發(fā)送POST到模型對應(yīng)的url，數(shù)據(jù)格式為json{"name":"the5fire","age":38}
//然后接著就是從服務(wù)器端獲取數(shù)據(jù)使用方法fetch([options])
var man1 = new Man;
//第一種情況，如果直接使用fetch方法，那么他會發(fā)送get請求到你model的url中，
//你在服務(wù)器端可以通過判斷是get還是post來進行對應(yīng)的操作。
man1.fetch();
//第二種情況，在fetch中加入?yún)?shù)，如下：
man1.fetch({url:'/getmans/'});
//這樣，就會發(fā)送get請求到/getmans/這個url中，
//服務(wù)器返回的結(jié)果樣式應(yīng)該是對應(yīng)的json格式數(shù)據(jù)，同save時POST過去的格式。
//不過接受服務(wù)器端返回的數(shù)據(jù)方法是這樣的：
man1.fetch({url:'/getmans/',success:function(model,response){
alert('success');
//model為獲取到的數(shù)據(jù)
alert(model.get('name'));
},error:function(){
//當返回格式不正確或者是非json數(shù)據(jù)時，會執(zhí)行此方法
alert('error');
}});
注：上述代碼僅僅均為可正常執(zhí)行的代碼，不過關(guān)于服務(wù)器端的實例在后面會有。
這里還要補充一點，就是關(guān)于服務(wù)器的異步操作都是通過Backbone.sync這個方法來完成的，調(diào)用這個方法的時候會自動的傳遞一個參數(shù)過去，根據(jù)參數(shù)向服務(wù)器端發(fā)送對應(yīng)的請求。比如你save，backbone會判斷你的這個對象是不是新的，如果是新創(chuàng)建的則參數(shù)為create，如果是已存在的對象只是進行了改變，那么參數(shù)就為update，如果你調(diào)用fetch方法，那參數(shù)就是read，如果是destory，那么參數(shù)就是delete。也就是所謂的CRUD ("create", "read", "update", or "delete")，而這四種參數(shù)對應(yīng)的請求類型為POST，GET，PUT，DELETE。你可以在服務(wù)器根據(jù)這個request類型，來做出相應(yīng)的CRUD操作。
Note:
關(guān)于url和urlRoot的事，如果你設(shè)置了url，那么你的CRUD都會發(fā)送對應(yīng)請求到這個url上，但是這樣又一個問題，就是delete請求，發(fā)送了請求，但是卻沒有發(fā)送任何數(shù)據(jù)，那么你在服務(wù)器端就不知道應(yīng)該刪除哪個對象（記錄），所以這里又一個urlRoot的概念，你設(shè)置了urlRoot之后，你發(fā)送PUT和DELETE請求的時候，其請求的url地址就是：/baseurl/[model.id]，這樣你就可以在服務(wù)器端通過對url后面值的提取更新或者刪除對應(yīng)的對象（記錄）。
Collection
collection是model對象的一個有序的集合，概念理解起來十分簡單，在通過幾個例子來看一下，會覺得更簡單。
1、關(guān)于book和bookshelf的例子
Book = Backbone.Model.extend({
defaults : { // 感謝網(wǎng)友藍色動力指正改為defaults
title:'default'
},
initialize: function(){
//alert('Hey, you create me!');
}
});
BookShelf = Backbone.Collection.extend({
model : Book
});
var book1 = new Book({title : 'book1'});
var book2 = new Book({title : 'book2'});
var book3 = new Book({title : 'book3'});
//var bookShelf = new BookShelf([book1, book2, book3]); //注意這里面是數(shù)組,或者使用add
var bookShelf = new BookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
//基于underscore這個js庫，還可以使用each的方法獲取collection中的數(shù)據(jù)
bookShelf.each(function(book){
alert(book.get('title'));
});
很簡單，不解釋
2、使用fetch從服務(wù)器端獲取數(shù)據(jù)
首先要在上面的的Bookshelf中定義url，注意collection中并沒有urlRoot這個屬性?；蛘吣阒苯釉趂etch方法中定義url的值，如下：
bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
collection.each(function(book){
alert(book.get('title'));
});
},error:function(){
alert('error');
}});
其中也定義了兩個接受返回值的方法，具體含義我想很容易理解，返回正確格式的數(shù)據(jù)，就會調(diào)用success方法，錯誤格式的數(shù)據(jù)就會調(diào)用error方法，當然error方法也看添加和success方法一樣的形參。
對應(yīng)的BookShelf的返回格式如下：[{'title':'book1'},{'title':'book2'}.....]
3、reset方法
這個方法的時候是要和上面的fetch進行配合的，collection在fetch到數(shù)據(jù)之后，會調(diào)用reset方法，所以你需要在collection中定義reset方法或者是綁定reset方法。這里使用綁定演示：
bookShelf.bind('reset',showAllBooks);
showAllBooks = function(){
bookShelf.each(function(book){
//將book數(shù)據(jù)渲染到頁面。
});
}
綁定的步驟要在fetch之前進行。
下面給出關(guān)于collection的完整代碼，需要服務(wù)器端支持才行，服務(wù)器端的搭建在后面會寫到。
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-collection</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
//collection是一個簡單的models的有序集合
//1、一個簡單的例子
Book = Backbone.Model.extend({
defaults : { // 感謝網(wǎng)友藍色動力指正改為defaults
title:'default'
},
initialize: function(){
//alert('Hey, you create me!');
}
});
BookShelf = Backbone.Collection.extend({
model : Book
});
var book1 = new Book({title : 'book1'});
var book2 = new Book({title : 'book2'});
var book3 = new Book({title : 'book3'});
//var bookShelf = new BookShelf([book1, book2, book3]); //注意這里面是數(shù)組,或者使用add
var bookShelf = new BookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
/*
for(var i=0; i<bookShelf.models.length; i++) {
alert(bookShelf.models[i].get('title'));
}
*/
//基于underscore這個js庫，還可以使用each的方法獲取collection中的數(shù)據(jù)
bookShelf.each(function(book){
alert(book.get('title'));
});
//2、使用fetch從服務(wù)器端獲取數(shù)據(jù),使用reset渲染
bookShelf.bind('reset', showAllBooks);
bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
collection.each(function(book){
alert(book.get('title'));
});
},error:function(){
alert('error');
}});
showAllBooks = function(){
bookShelf.each(function(book){
//將book數(shù)據(jù)渲染到頁面。
});
}
//上述代碼僅僅均為可正常執(zhí)行的代碼，不過關(guān)于服務(wù)器端的實例在后面會有。
})(jQuery);
</script>
</html>
相關(guān)文章
這篇文章主要介紹了Javascript MVC框架Backbone.js詳解,本文對Backbone.js的各個模塊和方法的使用上都給出了實際例子,需要的朋友可以參考下2014-09-09
實例講解JavaScript的Backbone.js框架中的View視圖
這篇文章主要介紹了實例講解JavaScript的Backbone.js框架中的View視圖,在瀏覽器端js框架backbone中我們用view來綁定和處理DOM事件,需要的朋友可以參考下2016-05-05
Backbone View 之間通信有三種，分別是通過父視圖傳遞事件，通過 EventBus 在視圖間通信，直接用 Backbone 作為事件注冊機，本文對這三種通信方式逐一詳細介紹，感興趣的朋友一起學(xué)習(xí)2016-08-08
Backbone.js為復(fù)雜WEB應(yīng)用程序提供模型(models)、集合(collections)、視圖(views)的結(jié)構(gòu)。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合附有可枚舉函數(shù)的豐富API； 視圖可以聲明事件處理函數(shù)，并通過RESRful JSON接口連接到應(yīng)用程序。2015-06-06
全面解析JavaScript的Backbone.js框架中的Router路由
這篇文章主要介紹了Backbone.js框架中的Router路由功能,Router在Backbone中相當于一個MVC框架中的Controller控制器功能,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Backbone.js的一些使用技巧,Backbone.js是一款人氣JavaScript庫,需要的朋友可以參考下2015-07-07
Backbone.js框架中Model與Collection的使用實例
這篇文章主要介紹了Backbone.js框架中Model與Collection的使用實例,Collection是Model的一個有序的集合,需要的朋友可以參考下2016-05-05
簡單了解Backbone.js的Model模型以及View視圖的源碼
這篇文章主要簡單介紹了Backbone.js的Model模型以及View視圖的源碼,Backbone是一款高人氣JavaScript的MVC框架,需要的朋友可以參考下2016-02-02
詳解Backbone.js框架中的模型Model與其集合collection
這篇文章主要介紹了Backbone.js框架中的模型Model與其集合collection,Backbone擁有與傳統(tǒng)MVC框架相類似的Model與View結(jié)構(gòu),需要的朋友可以參考下2016-05-05
講解JavaScript的Backbone.js框架的MVC結(jié)構(gòu)設(shè)計理念
這篇文章主要介紹了JavaScript的Backbone.js框架的MVC結(jié)構(gòu)設(shè)計理念,相比較于Angular.js,同樣為MVC結(jié)構(gòu)的Backbone則顯得輕巧許多,需要的朋友可以參考下2016-02-02