這篇文章主要介紹了Backbone.js框架中的模型Model與其集合collection,Backbone擁有與傳統(tǒng)MVC框架相類(lèi)似的Model與View結(jié)構(gòu),需要的朋友可以參考下

什么是 Model

Backbone 的作者是這樣定義 Model 的：

Model 是任何一個(gè) web 應(yīng)用的核心，它包含了交互的數(shù)據(jù)以及大部分的邏輯。例如：轉(zhuǎn)化、驗(yàn)證、屬性和訪問(wèn)權(quán)限等。

那么，我們首先來(lái)創(chuàng)建一個(gè)Model：

Person = Backbone.Model.extend({

  initialize: function(){

    alert("Welcome to Backbone!");

  }

});

var person = new Person;

上述代碼中，我們定義了一個(gè)名為 Person 的 Model,實(shí)例化后，得到 person。任何時(shí)候當(dāng)你實(shí)例化一個(gè) Model，都會(huì)自動(dòng)觸發(fā) initialize() 方法（這個(gè)原則同樣適用于 collection, view）。當(dāng)然，定義一個(gè) Model 時(shí)，并非強(qiáng)制要求使用 initialize() 方法，但是隨著你對(duì) Backbone 的使用，你會(huì)發(fā)現(xiàn)它不可或缺。

設(shè)置 Model 屬性

現(xiàn)在我們想在創(chuàng)建 Model 實(shí)例時(shí)傳遞一些參數(shù)用來(lái)設(shè)置 Model 的屬性：

Person = Backbone.Model.extend({

  initialize: function(){

    alert("Welcome to Backbone!");

  }

});

//在實(shí)例化 Model 時(shí)直接設(shè)置

var person = new Person({ name: "StephenLee", age: 22 });

//我們也可以在 Model 實(shí)例化后，通過(guò) 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)屬性

有時(shí)你希望 Model 實(shí)例化時(shí)本身就包含一些默認(rèn)的屬性值，這個(gè)可以通過(guò)定義 Model 的 defaults 屬性來(lái)實(shí)現(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"); // 因?yàn)閷?shí)例化時(shí)未指定 age 值，則為默認(rèn)值 30

var name = person.get("name"); //實(shí)例化制定了 name 值，則為 "StephenLee"

使用 Model 屬性

你可以在 Model 中自定義方法來(lái)使用 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)聽(tīng) Model 屬性的改變

根據(jù) Backbone 的機(jī)制，我們可以給對(duì) Model 的任意屬性進(jìn)行監(jiān)聽(tīng)，接下來(lái)，我們嘗試在 initialize() 方法中綁定 Model 一個(gè)的屬性進(jìn)行監(jiān)聽(tīng)，以屬性 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"});

通過(guò)上述代碼，我們知道了如何對(duì) Model 的某個(gè)屬性進(jìn)行監(jiān)聽(tīng)。假設(shè)我們需要對(duì) Model 所有的屬性進(jìn)行監(jiān)聽(tīng)，則使用 'this.on("change", function(model){}); 。

服務(wù)器與 Model 的數(shù)據(jù)交互

前文中已提到 Model 包含了交互的數(shù)據(jù)，所以它的作用之一便是承載服務(wù)器端傳來(lái)的數(shù)據(jù)，并與服務(wù)器端進(jìn)行數(shù)據(jù)交互?，F(xiàn)在我們假設(shè)服務(wù)器端有一個(gè) mysql 的表 user,該表有三個(gè)字段 id, name, email 。服務(wù)器端采用 REST 風(fēng)格與前端進(jìn)行通信，使用 URL：/user 來(lái)進(jìn)行交互。我們的 Model 定義為：

var UserModel = Backbone.Model.extend({

  urlRoot: '/user',

  defaults: {

    name: '',

    email: ''

  }

});

創(chuàng)建一個(gè) Model

Backbone 中每個(gè) Model 都擁有一個(gè)屬性 id，它與服務(wù)器端數(shù)據(jù)一一對(duì)應(yīng)。如果我們希望在服務(wù)器端的 mysql 表 user 中新增一條記錄，我們只需要實(shí)例化一個(gè) Model，然后調(diào)用 save() 方法即可。此時(shí) Model 實(shí)例的屬性 id 為空，即說(shuō)明這個(gè) Model 是新建的，因此 Backbone 將會(huì)向指定的 URL 發(fā)送一個(gè) POST 請(qǐng)求。

var UserModel = Backbone.Model.extend({

  urlRoot: '/user',

  defaults: {

    name: '',

    email: ''

  }

});

var user = new Usermodel();

//注意，我們并沒(méi)有在此定義 id 屬性

var userDetails = {

  name: 'StephenLee',

  email: 'stephen.lee@mencoplatform.com'

};

//因?yàn)?model 沒(méi)有 id 屬性，所以此時(shí)使用 save() 方法，Backbone 會(huì)向服務(wù)器端發(fā)送一個(gè) POST 請(qǐng)求，服務(wù)器端收到數(shù)據(jù)后，將其存儲(chǔ)，并返回包含 id 的信息給 Model

user.save(userDetails, {

  success: function (user) {

    alert(user.toJSON());

  }

})

此時(shí)，在服務(wù)器端 mysql 的 user 表里多了一條 name 為 StephenLee,email 為 stephen.lee@mencoplatform.com 的記錄。

取得一個(gè) Model

剛剛我們已經(jīng)創(chuàng)建了一個(gè) Model，并將它存儲(chǔ)到了服務(wù)器端的數(shù)據(jù)庫(kù)中，假設(shè)創(chuàng)建 Model 時(shí)，服務(wù)器端返回的 id 屬性值為 1，此時(shí)，我們通過(guò) id 的值就可以將已存儲(chǔ)的數(shù)據(jù)取回。當(dāng)我們用 id 屬性值初始化一個(gè) Model 實(shí)例時(shí)，通過(guò) fetch() 操作，Backbone 將會(huì)向指定的 URL 發(fā)送一個(gè) GET 請(qǐng)求。

var user = new Usermodel({id: 1});//初始化時(shí)指定 id 的值

//利用 fetch() 方法將會(huì)向 user/1 請(qǐng)求數(shù)據(jù)，服務(wù)器端將會(huì)返回完整的 user 記錄，包含 name,email 等信息

user.fetch({

  success: function (user) {

    alert(user.toJSON());

  }

})

更新一個(gè) Model

如果我們需要對(duì)已經(jīng)存儲(chǔ)的 user 記錄進(jìn)行修改，利用已知的 id 值，同樣使用 save() 方法，但因?yàn)榇藭r(shí) id 不為空，Backbone 將會(huì)向指定的 URL 發(fā)送一個(gè) PUT 請(qǐng)求。

var user = new Usermodel({

  id: 1,

  name: 'StephenLee',

  email: 'stephen.lee@mencoplatform.com'

});//實(shí)例化時(shí)指定 id 值

//因?yàn)橹付?id 值，此時(shí)使用 save() 方法，Backbone 將會(huì)向 user/1 發(fā)送 PUT 請(qǐng)求，將會(huì)對(duì)數(shù)據(jù)庫(kù)中 id 為1的記錄的 email 修改

user.save({email: 'newemail@qq.com'}, {

  success: function (model) {

    alert(user.toJSON());

  }

});

刪除一個(gè) Model

如果我們需要?jiǎng)h除數(shù)據(jù)庫(kù)中的記錄，利用已知的 id 值，使用 destroy() 方法即可。此時(shí)，Backbone 將會(huì)向指定的 URL 發(fā)送一個(gè) DELETE 操作。

var user = new Usermodel({

  id: 1,

  name: 'StephenLee',

  email: 'stephen.lee@mencoplatform.com'

});//實(shí)例化時(shí)指定 id 值

//因?yàn)橹付?id 值，此時(shí)使用 destroy() 方法，Backbone 將會(huì)向 user/1 發(fā)送 DELETE 請(qǐng)求，服務(wù)器端接收請(qǐng)求后，將會(huì)在數(shù)據(jù)庫(kù)中刪除 id 為 1的數(shù)據(jù)

user.destroy({

  success: function () {

    alert('Destroyed');

  }

});

什么是 Collection

簡(jiǎn)而言之，Backbone 中的 Collection 就是 Model 的一個(gè)有序集合，比如，它可能會(huì)在以下情況中用到:

Model: Student, Collection: ClassStudents

Model: Todo Item, Collection: Todo List

Model: Animal, Collection: Zoo

Collection 一般只使用同一類(lèi)型的 Model，但是 Model 可以屬于不同類(lèi)型的 Collection，比如：

Model: Student, Collection: Gym Class

Model: Student, Collection: Art Class

Model: Student, Collection: English Class

創(chuàng)建一個(gè) 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]