用Backbone.js建立一個聯繫人管理系統(五)

原文: Build a Contacts Manager Using Backbone.js: Part 5

這是這系列教程最後一部分了. 以前全部的增刪改都在前端完成. 這部分咱們要把Contact的數據存儲到數據庫裏.

 開始準備

在這裏咱們須要一個Web服務器,還有一個數據庫. 能夠是SQLServer.咱們須要在

數據庫中建立一個表來存儲Concat. 表還要有一個主鍵ID,最好這個ID是unique和

自增加類型的. 雖然如今咱們的Concat model裏沒有這個屬性可是要把它存儲到數

據庫裏ID仍是有必要的.

Backbone的sync()

sync是Backbone.js提供給咱們和服務器溝通的模塊. 這是咱們惟一還沒用到的重要模塊.

理解它後咱們就能夠完整的瞭解Backbone.js的整個框架.

調用sync()方法能夠向服務器發送一個請求. 假設這個方法是經過調用JQuery或者Zepto來執行的請求.

又假設一個RESTful接口在後臺使用POST,PUT,GET,DELETE,HTTP等方法.就像咱們看到的,Backbone

可以用在headers中加入預處理動做的方法來配置GET,POST方法的回調函數(我以爲應該是call back他寫錯了).

除了直接調用sync(),models和collections也有方法能夠用來和數據庫通訊. models有destory(),fetch(),

parse()和save()方法, collection有fetch()和parse()方法.不論是models仍是collections的destroy(),fetch()

和sync()方法性能都不如sync().parse()方法在服務器返回數據後自動調用. 默認不作任何操做只是返回數據庫

響應,可是你重寫它來添加你但願在服務器響應前作的操做.

頁面載入時的操做

讓model數據顯示到頁面中的方法依賴後臺技術.Backbone官方文檔中collection的fetch()方法提到,這個方法不

能在頁面初始化的時候從服務器請求數據.這部分在精華問答區有提到,一個頁面在全部必需的模塊沒有徹底載入前

應該避免初始化AJAX請求.當咱們還不清楚一件事的時候遵從別人的建議是比較好的主意.這會讓咱們的應用程序更

加穩定.讓model數據顯示到頁面中的方法依賴後臺技術.咱們在這個例子裏要使用.net技術. 因此須要建立一個<script>

標籤來動態加載須要的js模塊到頁面裏.作完這些後咱們要開始把原來的index.html改爲index.aspx.  固然我也也

須要index.aspx.cs存放後臺代碼.可是這會產生一個問題.在ASPX頁面中使用Underscore微模版.咱們能夠把

Underscore文檔中的Mustache-style例子直接拿來用.如今的問題是Underscore的模版使用<%=做爲指定的佔位符

來代替實際數據.這和ASPX頁面.net代碼使用的同樣.Underscore的模版咱們在ASPX頁面裏運行會報出服務器錯誤.

很幸運有幾種辦法能解決這個問題,其中最簡單的是在模版中修改使用佔位符的語法.

Underscore提供的templateSettings這個屬性就是爲了解決這樣的問題的.他可以很容易的用指定的正則表達式來替

換成咱們但願的符號.實際上咱們能夠直接拿'Mustache-style這個例子來用,在app.js文件開始(在閉包內)咱們只要加入

如下代碼:

_.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g
};

全部這些支持一個正則表達式方法interpolate, 它容許咱們使用{{property}}這個語法還替換<%= property%>

爲此咱們必須把全部原來的模版的標籤替換成新的語法.儘管這和咱們原來用的模版變化比很大, 至少咱們如今能夠用

Underscore了.咱們對於Javascript使用<%的地方可使用用<%-來轉換數據.若是咱們準備使用這些在咱們的模版

裏來替換interpolate屬性. 咱們應該也要配置Underscore裏的evaluate和escape.屬性.

準備Model數據

咱們如今要考慮在頁面初始化渲染的時候怎麼樣把model數據從數據庫中如何取到咱們的頁面中來.咱們能很容易的在

ASPX的類文件中加入一個簡單的方法. 從數據庫中讀取記.建立一個對象列表. 每一個對象可以表示一個聯繫人.咱們接下

來把數據轉化爲Javascript數據類型而且插入到頁面中.和前面四部分教程使用的模擬數據同樣的格式. 咱們不用改變前

端代碼.做爲數組的佔位符,咱們只要在頁面的body里加入一個新的<script>標籤. 直接把後臺調用的代碼放在app.js

引用的簽名.後臺代碼的執行邏輯就是要從數據庫取出數據列表而後序列化. 實現的方法有不少種,這些超出了本教程的範圍.

咱們更關注在頁面初始化時如何獲得這些數據.隨時查看樣例代碼的文件是一個簡單又快速的方法,可是這不是最好的作法.

在此基礎上,咱們必需要刪除app.js裏的聯繫人數組數據. 把頁面運行在WVD或者ISS服務器上. 看看是否是和咱們完成

第四部分的時候同樣.

 和服務器同步應用

 在這個例子裏咱們用了.net4.0的asmx文件處理前端的請求.按後端看到的數據順序發送它. 咱們應該配置Backbone的

emulateHTTP和emulateJSON屬性.在咱們修改後的Underscore模版語法後加入下面代碼:

Backbone.emulateHTTP = true;
Backbone.emulateJSON = true;

當你建立Backbone應用時你是否須要配置這些屬性取決於於你你選擇的後端技術是什麼?看咱們的應用程序編輯數據的

幾種方法都實現了. 它能改變聯繫人的信息,能添加一個新的聯繫人. 還可以刪除一個 已有的聯繫人.全部的這些前端邏輯

都有了,可是如今要從服務器調用這些方法得要修改.儘管以前頁面已經作過渲染了,若是咱們刪除一個聯繫人. Backbone

仍是會報一個錯誤,url has not been defined.緣由是咱們使用了destroy()方法在ContactView類的deleteContact()

方法裏.來看看怎麼讓刪除功能恢復正常.首先在model裏得定義url屬性.爲Contact類添加url屬性.

url: function () {
    return "/ContactManager.asmx/ManageContact?id=" + this.get("id");
}

咱們爲url屬性指定一個function,返回須要請求的url.在這個例子中咱們用asmx文件去處理請求.咱們還要爲咱們的Web

方法取一個名字(ManageContact)  而且使用model的id屬性做爲查詢參數.如今若是咱們在頁面上刪除一個聯繫人就向

Web Service提交了一個請求.DELETE方法的原理是在請求的HTTP 頭中重寫入指定的信息.(X-HTTP-Method-Override)

值爲DELETE.利用這個方法咱們能讓Web service知道應該對數據庫作什麼操做.下步咱們該修改ContactView類的

saveEdits()方法. 當一個聯繫人編輯完後. 像下面這樣使用set()方法來告訴web service.

this.model.set(formData).save();

咱們全部要作僅僅是在set()後接着再調用save().save()經過sync()方法代理向服務器提交請求.像以前通常使用PUT把

model的id做爲查詢字符串發送給服務器.此次http頭的Content-Type設置爲application/x-www-form-urlencoded.

(若是咱們沒有配置emulateJSON屬性默認是application/json)而且model數據會以表單數據的形式發送. 因此咱們修改

這個設置仍是頗有必要的.全部這些前端的修改都在DirectoryView類的addContact()方法中.以前這個方法裏有一條if語句

檢查model的類型是否已經存在來判斷select按鈕是否須要更新.如今咱們要把這條if語句改爲下面這個樣子:

if (_.indexOf(this.getTypes(), formData.type) === -1) {
    this.$el.find("#filter").find("select").remove().end().append(this.createSelect());
}
 
this.collection.create(formData);

咱們把if語句下面的else條件刪除掉使代碼更加簡潔.咱們還刪除了add()方法而且增長create()方法在原來的位置.create()

方法實際上自動的增長一個model對象到collection中.不須要咱們手動建立model實例. 而且經過sync()自動向服務器發送請求.

此次咱們不用去設置http頭的X-HTTP-Method-Override屬性. 由於咱們要用的POST方法使用了RESTful接口.和save()

方法同樣. create()方法的數據也是以form data形式發送給服務器.和教程開始時候服務器端處理同樣. 如何服務器端請求初始

化model數據也不屬於本教程的範疇.咱們僅僅關注前端部分.和以前教程同樣. 本教程demo有包含註釋的完整web service代碼,

你感興趣的化能夠下載查看.並且還包含了數據庫的備份文件. 你能夠回覆本分獲得demo裏的數據.

 總結

這部分教程,咱們學習了若是一些使用Backbone的sync()方法和後臺通訊的前端方法.咱們看到Backbone經過缺省RESTful方式

請求一個指定的URL. 而且在REST的基礎上經過配置和傳統服務器一同工做.咱們還學習了一些使用經過sync()代理和服務器通

信的方法.特別是remove(),save()和create()方法如何向服務器發送請求.咱們還學習瞭如何使用正則表達式修改Underscore.js

模版的插入符號.聯繫人管理的培訓如今結束了.固然咱們還能爲應用添加更多的功能.咱們的教程已經包含用很是出色的Backbone.js

建立功能完善的應用程序的基礎知識.

感謝你的閱讀.

源文件下載連接: http://cdn.tutsplus.com/net/uploads/legacy/1151_bb5/demo.zip