詳解Backbone.js框架中的模型Model與其集合collection
什么是 Model
Backbone 的作者是這樣定義 Model 的：
Model 是任何一個 web 應(yīng)用的核心，它包含了交互的數(shù)據(jù)以及大部分的邏輯。例如：轉(zhuǎn)化、驗證、屬性和訪問權(quán)限等。
那么，我們首先來創(chuàng)建一個Model：
Person = Backbone.Model.extend({
initialize: function(){
alert("Welcome to Backbone!");
}
});
var person = new Person;
上述代碼中，我們定義了一個名為 Person 的 Model,實例化后，得到 person。任何時候當(dāng)你實例化一個 Model，都會自動觸發(fā) initialize() 方法（這個原則同樣適用于 collection, view）。當(dāng)然，定義一個 Model 時，并非強(qiáng)制要求使用 initialize() 方法，但是隨著你對 Backbone 的使用，你會發(fā)現(xiàn)它不可或缺。
設(shè)置 Model 屬性
現(xiàn)在我們想在創(chuàng)建 Model 實例時傳遞一些參數(shù)用來設(shè)置 Model 的屬性：
Person = Backbone.Model.extend({
initialize: function(){
alert("Welcome to Backbone!");
}
});
//在實例化 Model 時直接設(shè)置
var person = new Person({ name: "StephenLee", age: 22 });
//我們也可以在 Model 實例化后，通過 set() 方法進(jìn)行設(shè)置
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"
設(shè)置 Model 默認(rèn)屬性
有時你希望 Model 實例化時本身就包含一些默認(rèn)的屬性值，這個可以通過定義 Model 的 defaults 屬性來實現(xiàn)：
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 值，則為默認(rèn)值 30
var name = person.get("name"); //實例化制定了 name 值，則為 "StephenLee"
使用 Model 屬性
你可以在 Model 中自定義方法來使用 Model 內(nèi)的屬性。（所有自定義的方法默認(rèn)為 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");// 設(shè)置 StephenLee's hobby 為 coding
var hobby = person.get("hobby"); // "coding"
監(jiān)聽 Model 屬性的改變
根據(jù) Backbone 的機(jī)制，我們可以給對 Model 的任意屬性進(jìn)行監(jiān)聽，接下來，我們嘗試在 initialize() 方法中綁定 Model 一個的屬性進(jìn)行監(jiān)聽，以屬性 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 的某個屬性進(jìn)行監(jiān)聽。假設(shè)我們需要對 Model 所有的屬性進(jìn)行監(jiān)聽，則使用 'this.on("change", function(model){}); 。
服務(wù)器與 Model 的數(shù)據(jù)交互
前文中已提到 Model 包含了交互的數(shù)據(jù)，所以它的作用之一便是承載服務(wù)器端傳來的數(shù)據(jù)，并與服務(wù)器端進(jìn)行數(shù)據(jù)交互?，F(xiàn)在我們假設(shè)服務(wù)器端有一個 mysql 的表 user,該表有三個字段 id, name, email 。服務(wù)器端采用 REST 風(fēng)格與前端進(jìn)行通信，使用 URL：/user 來進(jìn)行交互。我們的 Model 定義為：
var UserModel = Backbone.Model.extend({
urlRoot: '/user',
defaults: {
name: '',
email: ''
}
});
創(chuàng)建一個 Model
Backbone 中每個 Model 都擁有一個屬性 id，它與服務(wù)器端數(shù)據(jù)一一對應(yīng)。如果我們希望在服務(wù)器端的 mysql 表 user 中新增一條記錄，我們只需要實例化一個 Model，然后調(diào)用 save() 方法即可。此時 Model 實例的屬性 id 為空，即說明這個 Model 是新建的，因此 Backbone 將會向指定的 URL 發(fā)送一個 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 會向服務(wù)器端發(fā)送一個 POST 請求，服務(wù)器端收到數(shù)據(jù)后，將其存儲，并返回包含 id 的信息給 Model
user.save(userDetails, {
success: function (user) {
alert(user.toJSON());
}
})
此時，在服務(wù)器端 mysql 的 user 表里多了一條 name 為 StephenLee,email 為 stephen.lee@mencoplatform.com 的記錄。
取得一個 Model
剛剛我們已經(jīng)創(chuàng)建了一個 Model，并將它存儲到了服務(wù)器端的數(shù)據(jù)庫中，假設(shè)創(chuàng)建 Model 時，服務(wù)器端返回的 id 屬性值為 1，此時，我們通過 id 的值就可以將已存儲的數(shù)據(jù)取回。當(dāng)我們用 id 屬性值初始化一個 Model 實例時，通過 fetch() 操作，Backbone 將會向指定的 URL 發(fā)送一個 GET 請求。
var user = new Usermodel({id: 1});//初始化時指定 id 的值
//利用 fetch() 方法將會向 user/1 請求數(shù)據(jù)，服務(wù)器端將會返回完整的 user 記錄，包含 name,email 等信息
user.fetch({
success: function (user) {
alert(user.toJSON());
}
})
更新一個 Model
如果我們需要對已經(jīng)存儲的 user 記錄進(jìn)行修改，利用已知的 id 值，同樣使用 save() 方法，但因為此時 id 不為空，Backbone 將會向指定的 URL 發(fā)送一個 PUT 請求。
var user = new Usermodel({
id: 1,
name: 'StephenLee',
email: 'stephen.lee@mencoplatform.com'
});//實例化時指定 id 值
//因為指定了 id 值，此時使用 save() 方法，Backbone 將會向 user/1 發(fā)送 PUT 請求，將會對數(shù)據(jù)庫中 id 為1的記錄的 email 修改
user.save({email: 'newemail@qq.com'}, {
success: function (model) {
alert(user.toJSON());
}
});
刪除一個 Model
如果我們需要刪除數(shù)據(jù)庫中的記錄，利用已知的 id 值，使用 destroy() 方法即可。此時，Backbone 將會向指定的 URL 發(fā)送一個 DELETE 操作。
var user = new Usermodel({
id: 1,
name: 'StephenLee',
email: 'stephen.lee@mencoplatform.com'
});//實例化時指定 id 值
//因為指定了 id 值，此時使用 destroy() 方法，Backbone 將會向 user/1 發(fā)送 DELETE 請求，服務(wù)器端接收請求后，將會在數(shù)據(jù)庫中刪除 id 為 1的數(shù)據(jù)
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，但是 Model 可以屬于不同類型的 Collection，比如：
Model: Student, Collection: Gym Class Model: Student, Collection: Art Class Model: Student, Collection: English Class
創(chuàng)建一個 Collection
//定義 Model Song
var Song = Backbone.Model.extend({
defaults: {
name: "Not specified",
artist: "Not specified"
},
initialize: function(){
console.log("Music is the answer");
}
});
//定義 Collection Album
var Album = Backbone.Collection.extend({
model: Song //指定 Collection 內(nèi)的 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]
- 深入解析Backbone.js框架的依賴庫Underscore.js的作用
- JavaScript的Backbone.js框架入門學(xué)習(xí)指引
- 實例講解JavaScript的Backbone.js框架中的View視圖
- 全面解析JavaScript的Backbone.js框架中的Router路由
- JavaScript的Backbone.js框架的一些使用建議整理
- Backbone.js框架中簡單的View視圖編寫學(xué)習(xí)筆記
- 講解JavaScript的Backbone.js框架的MVC結(jié)構(gòu)設(shè)計理念
- Backbone.js的Hello World程序?qū)嵗?/a>
- JavaScript的Backbone.js框架環(huán)境搭建及Hellow world示例
相關(guān)文章
講解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
深入解析Backbone.js框架的依賴庫Underscore.js的作用
這篇文章主要介紹了深入解析Backbone.js框架的依賴庫Underscore.js的作用,用過Node.js的朋友對Underscore一定不會陌生:)需要的朋友可以參考下2016-05-05
JavaScript的Backbone.js框架入門學(xué)習(xí)指引
這篇文章主要介紹了JavaScript的Backbone.js框架入門學(xué)習(xí)指引, 其中特別講到了Backbone中的關(guān)鍵部分Router路由器,需要的朋友可以參考下2016-05-05
Backbone中View之間傳值的學(xué)習(xí)心得
Backbone中的View就是用來展示由Model層傳出的數(shù)據(jù)，或者在View里產(chǎn)生的一些數(shù)據(jù)，本文給大家介紹Backbone中View之間傳值的解決方法，感興趣的朋友一起看下吧2016-08-08
關(guān)于backbone url請求中參數(shù)帶有中文存入數(shù)據(jù)庫是亂碼的快速解決辦法
這篇文章主要介紹了關(guān)于backbone url請求中參數(shù)帶有中文存入數(shù)據(jù)庫是亂碼的快速解決辦法的相關(guān)資料,需要的朋友可以參考下2016-06-06
BackBone及其實例探究_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了BackBone及其實例探究,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Backbone.js的一些使用技巧,Backbone.js是一款人氣JavaScript庫,需要的朋友可以參考下2015-07-07
require、backbone等重構(gòu)手機(jī)圖片查看器
這篇文章主要為大家詳細(xì)介紹了require、backbone等重構(gòu)手機(jī)圖片查看器的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
JavaScript的Backbone.js框架環(huán)境搭建及Hellow world示例
這篇文章主要介紹了JavaScript的Backbone.js框架環(huán)境搭建及Hellow world示例,Backbone是一個類似MVC結(jié)構(gòu)的前端MVVM框架,非常輕量,需要的朋友可以參考下2016-05-05
Backbone View 之間通信有三種，分別是通過父視圖傳遞事件，通過 EventBus 在視圖間通信，直接用 Backbone 作為事件注冊機(jī)，本文對這三種通信方式逐一詳細(xì)介紹，感興趣的朋友一起學(xué)習(xí)2016-08-08