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
我們之後會推出一系列的專文逐一介紹。
在開始之前，請先把 Backbone.js 以及其所依賴的函式庫 Underscore.js 加進來：
Model 簡介
Model顧名思義是用來存放資料的類別，使用 Backbone 的 model 的好處是可以很容易地和其他 Backbone 的類別作互動，這部分從底下的例子可以先看出一些雛形。
廢話不多說，首先我們來新增一個 model 吧！Backbone.js 的 constructor 的名字是 initialize：
可以直接新增 model 的屬性：
或是取出剛才新增的屬性：
console.log(persion.get(‘name’));
也可以針對屬性給予預設值：
因此，底下 person 雖然沒有傳入預設的屬性，但透過 get 仍可以取得預設值：
因此，底下 person 雖然沒有傳入預設的屬性，但透過 get 仍可以取得預設值：
除了對 Model 的基本 get/set 操作之外，我們也可以 listen 一些 event，像是 view 或是 model 的變化。底下的例子是當 "name" 屬性的 change 事件發生的時候，會把 name 印出來。
也可以透過 binding 機制檢查 model 的正確性，例如：
除此之外，也可以很容易地把 model 轉成 JSON，像是：
console.log( person.toJSON() );
以上是 Backbone.js 的 model 的基本介紹，希望大家會喜歡！
想進一步瞭解的朋友歡迎直接造訪官網站：
Happy Coding!
沒有留言:
張貼留言