3、backbone中的model例項
關於backbone，最基礎的一個東西就是model，這個東西就像是後端開發中的資料庫對映那個model一樣，也是資料物件的模型，並且應該是和後端的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的展現，不定義了屬性，這裡是一個 初始化時的方法，或者稱之為建構函式。
2、物件賦值的兩種方法
第一種，直接定義，設定預設值。
Man =initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'張三',
age: '38'
}
});
var man = new Man;
alert(man.get('name'));
第二種，賦值時定義
Man = Backbone.Model.extend({initialize:
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、監聽物件中屬性的變化
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化時繫結監聽
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'}) //觸發繫結的change事件，alert。5、為物件新增驗證規則，以及錯誤提示
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化時繫結監聽
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:''}); //根據驗證規則，彈出錯誤提示。6、物件的獲取和儲存，需要伺服器端支援才能測試。
首先需要為物件定義一個url屬性，呼叫save方法時會post物件的所有屬性到server端。
Man = Backbone.Model.extend({
url:'/save/',
initialize: function(){
alert('Hey, you create me!');
//初始化時繫結監聽
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(); //會發送POST到模型對應的url，資料格式為json{"name":"the5fire","age":38}
//然後接著就是從伺服器端獲取資料使用方法fetch([options])
var man1 = new Man;
//第一種情況，如果直接使用fetch方法，那麼他會發送get請求到你model的url中，
//你在伺服器端可以通過判斷是get還是post來進行對應的操作。
man1.fetch();
//第二種情況，在fetch中加入引數，如下：
man1.fetch({url:'/getmans/'});
//這樣，就會發送get請求到/getmans/這個url中，
//伺服器返回的結果樣式應該是對應的json格式資料，同save時POST過去的格式。
//不過接受伺服器端返回的資料方法是這樣的：
man1.fetch({url:'/getmans/',success:function(model,response){
alert('success');
//model為獲取到的資料
alert(model.get('name'));
},error:function(){
//當返回格式不正確或者是非json資料時，會執行此方法
alert('error');
}})注：上述程式碼僅僅均為可正常執行的程式碼，不過關於伺服器端的例項在後面會有。
這裡還要補充一點，就是關於伺服器的非同步操作都是通過Backbone.sync這個方法來完成的，呼叫這個方法的時候會自動的傳遞一個引數過去，根據引數向伺服器端傳送對應的請求。比如你save，backbone會判斷你的這個物件是不是新的，如果是新建立的則引數為create，如果是已存在的物件只是進行了改變，那麼引數就為update，如果你呼叫fetch方法，那引數就是read，如果是destory，那麼引數就是delete。也就是所謂的CRUD (“create”, “read”, “update”, or “delete”)，而這四種引數對應的請求型別為POST，GET，PUT，DELETE。你可以在伺服器根據這個request型別，來做出相應的CRUD操作。
PS：忘了解釋關於url和urlRoot的事情了，如果你設定了url，那麼你的CRUD都會發送對應請求到這個url上，但是這樣又一個問題，就是delete請求，傳送了請求，但是卻沒有傳送任何資料，那麼你在伺服器端就不知道應該刪除哪個物件（記錄），所以這裡又一個urlRoot的概念，你設定了urlRoot之後，你傳送PUT和DELETE請求的時候，其請求的url地址就是：/baseurl/[model.id]，這樣你就可以在伺服器端通過對url後面值的提取更新或者刪除對應的物件（記錄）。
關於這個Backbone.sync以後可能會說到，不過目前先以簡單入門為主。