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

Backbone.js 是當今頗受開發者喜愛的 Javascript MVC (Model-View-Controller) 框架 (framework) 之一 ，幾個知名的服務包括 Foursquare、LinkedIn Mobile 以及 Joel 團對開發的 Trello 等網站都已經上了骨幹 backbone(.js) 囉。

Backbone.js 提供了非常簡單的方式創建模型 (model) 和視圖 (view) 幫助開發者可以很自然而然的明確區隔使用者操作介面 (view) 的行為及背後資料處理 (model) 的邏輯，讓程式碼井然有序。

事實上，Backbone.js 並不是真正的 MVC framework，她並沒有 controller，但這卻不構成問題。通常 controller 比較適合於 client-server 的架構，controller 會攔截需求 (request) 以決定要調用哪個 model。以 Javascript 這種所有事情都跑在 client 端的情況來說，view 可以直接和 model 溝通而無需再透過 controller 。

Backbone.js 的 model 是透過 observer pattern 的方式，讓 view 可以直接監聽 model 上的任何 event ，並且立刻更新 view 本身。Backbone.js 也直接內建支援 jQuery 或 Zepto 操作 DOM。除此之外還提供了 collections (相當於 model 的 array)，並提供支援 RESTful JSON interface 的 API。

構成 Backbone.js 的基本元素有底下四種類別：

  Model

  View

  Router

  Collection

我們會針對各種類別逐篇介紹，而這一系列的介紹文章取材自於 Joe Zimmerman 的 Javascript Blog 影片教學單元，我們希望能藉由擷取影片中的重點，讓大家便於學習、複習整個 Backbone.JS 的基礎觀念。把影片翻譯成文章不是一件很容易的事，若內容有不夠周詳完整的地方，也懇請不吝告知。

在開始之前，請先把 Backbone.js 以及其所依賴的函式庫 Underscore.js 加進來：

緊接著就讓我們開始吧~

Model 顧名思義是用來存放資料的類別，使用 Backbone 的 model 的好處是可以很容易地和其他 Backbone 的類別作互動，這部分從底下的例子可以先看出一些雛形。
廢話不多說，首先我們來新增一個 model：Backbone.js 的 constructor 的名字是 initialize：

可以直接新增 model 的屬性：

或是取出剛才新增的屬性：

console.log(person.get('name'));

也可以針對屬性給予預設值：


因此，底下 person 雖然沒有傳入預設的屬性，但透過 get 仍可以取得預設值：

除了對 Model 的基本 get/set 操作之外，我們也可以 listen 一些 event，像是 view 或是 model 的變化。底下的例子是當 "name" 屬性的 change 事件發生的時候，會把 name 印出來（請注意 change:name 之間不能包含空格，感謝 Miau Huang 的提醒）。

也可以透過 binding 機制檢查 model 的正確性，例如：

編按：根據網友 amos6064 的建議，event 的 binding 用 on() 會比 bind() 好。

除此之外，也可以很容易地把 model 轉成 JSON，像是：

console.log( person.toJSON() );

最後，是一個完整的範例：

以上是 Backbone.js 的 model 的基本介紹，希望大家會喜歡！

想進一步瞭解的朋友歡迎直接造訪官網站：

http://documentcloud.github.com/backbone/

Happy Coding!

延伸閱讀

• 幫你的網頁加上Backbone(.js)（一）： Model
• 幫你的網頁加上Backbone(.js)（二）： View
• 幫你的網頁加上Backbone(.js)（三）： Router
• 幫你的網頁加上Backbone(.js)（四）： Collection
• 幫你的網頁加上Backbone(.js)（五）： AJAX