幫你的網頁加上 backbone(.js) 吧（五）！

請訪問 iCoding Blog 主站

今天要介紹的是 backbone.js 在 AJAX 的應用，也是「幫你的網頁加上 backbone(.js) 吧」系列的第五集。文章內容跟範例皆取材自 Joe Zimmerman 的 Javascript Blog 影片教學單元。看影片學寫程式是一件非常棒的事情，但若想快速複習影片中的重點，文字會是更有效率的方式，這也是這系列文章存在的初衷，翻譯如有不周也懇請不吝指正。

Backbone.JS 支援 REST 的開發風格，可以讓你用比較正確的方式使用 Web 標準來寫 code。例如當遇到一些典型的資料操作 CRUD - Create, Read, Update, Delete 邏輯時，可以很容易地對應到 POST, GET, PUT, DELETE 等 HTTP 方法來達成任務，避免無謂的再造輪子。

底下的範例是基於先前介紹過的 Model 和 Collection 等基礎觀念，再加上讓前端 Model 在 CRUD 操作時能夠直接和後端的資源（URL）做到同步能力。

此範例的環境設定比較複雜，需要準備好一臺後端的 HTTP Server 和資料庫，如果您無法做出這樣的環境，歡迎到這裡來看看DEMO程式（記得開啟JavaScript主控台）。而對後端 API 有興趣的話也可以到這裡參考原始碼，但請注意這個後端程式純屬 DEMO 用， Update 和 Create 的功能都沒有實作出來，只是剛好做出示意的環境來說明原理，實際要用還是需做修改及調整。

非常強烈建議閱讀本章的同時要打開 JavaScript 的 Console （或是 FireBug 這類的工具），並且觀察網路的狀況，仔細看送給後端的 HTTP header 資料。

緊接著，讓我們來看看原始碼吧：

一開始的 Backbone.emulateHTTP 和 Backbone.emulateJSON 是為了和舊的 HTTP Server 相容所設的（畢竟我們無法確保所有的 Server 都能完整支援 HTTP 的各種方法）。，emulateHTTP 是利用 POST 來模擬 PUT 和 DELETE 兩個 HTTP 做向下相容，模擬的方式是在 Form Data 的後面加上 _method 屬性來說明這個 POST 是 PUT 還是 DELETE。而 emulateJSON 則可以把要送給出的 JSON 在序列化（Serialize）之後，偽裝成 HTML Form 的 MIME 資料達到相容的效果。

接著，我們利用 Person 的 Model 建構子 initialize 來記錄所有被觸發的 event 用來檢驗整個範例程式流程的正確性。

在過去所學的 Model 範例中，Model 所指定的資料是無法永久保存的，每當該 JavaScript 頁面被重新執行一次，之前的資料就會被重新產生、覆蓋一次。除非，我們能指定一個能永久儲存資料的 URL 給該 Model。在 Person 裡的 url 方法，就是用來指定這個儲存位置給 Model。而 urlRoot 顧名思義是用來定義或回傳 URL 的字根（prefix），因此，從我們定義的 url 方法可以看出，Person 這個 Model 的 url 樣式大概會長這樣：

/examples/backbonejs-ajax/backbone.php?id=3

url 這個的方法會在各種 event 被觸發的時候被使用到，像是 fetch, save, destroy 等，而 url 這方法必須根據 model 本身的狀態來回傳該方法所需的 URL。舉例來說，當 save 這個方法被呼叫的時候，可以透過 isNew 方法先檢查 model 是否已經存到 server 來決定是要回傳 Create（POST）用的 URL 還是 Update（PUT）。

呼叫 fetch() 時會對 server 做 GET 的請求，因此當資料是 {id:1} 的時候，GET 的 URL 將會是

/examples/backbonejs-ajax/backbone.php?id=1

呼叫 save() 將會對 server 做 POST，當 model 的 data 是 {name:"Joe Zim", age:23} 時，由於沒有指定 id，因此將會對後端發出 POST 請求，其 URL 會是

/examples/backbonejs-ajax/backbone.php

如果 model 包含 id ，則呼叫 save() 時相當於要對某筆指定 id 的資料做 Update，此時由於 Backbone.emulateHTTP 的關係，會對後端送出假的 PUT 請求，相當於是一個 POST 並且在 HTTP Form Data 加上 _method: PUT 以來說明這個 POST 是要模擬成 PUT 的行為：

舉一反三，我們不難猜測 destroy() 正是呼叫 DELETE 方法，一樣用 POST 來模擬 DELETE，URL 會像是

/examples/backbonejs-ajax/backbone.php?id=1

也會會自動送出一個 Form Data 內容是 _method: DELETE。

小結上述，由 fetch() 、 save() 或 destroy() 來決定要對後端發送請求的方法是 GET、POST 或 DELETE，而當 model 資料包含某筆 id 時，則表示要送 PUT。

Collection 相當於在 Model 外面再多包一層殼，collection 在 create 資料的時候相當於新建一筆 model（所以兩者的 add event 都會被觸動）並呼叫 model 的 save()，接下來的運作原則跟前面 Model 也非常相似，差別主要在於多一層 People event 的觸發，而主要的 CRUD 操作都還是取決於 Model 上的定義。

希望以上的內容能幫助您多認識一點 Backbone.JS 無縫使用 AJAX 的小伎倆。

Happy Coding!

延伸閱讀

iCoding - We Coding ...

2012年7月16日星期一