2013年3月11日星期一

Ember.js 新手指南【序】


一直都想寫一篇有關Ember.js的新手文章,源於起步時面對無數的困難,苦閱無數英文的教學都無法解決的辛酸。但因為API一直變動,終於等到1.0 RC API Freeze,Router V2完成了,廢話就不多說,首先介紹一下甚麼是Ember.js。

註1:因為我討厭看長篇大論的文章,所以內容可能比較精簡,有甚麼問題可以留言詢問。
註2:◣◥ 中的翻譯為非正式譯名,重要名詞大多使用英文原詞
資料來源:
http://emberjs.com/guides/concepts/core-concepts/
http://www.adobe.com/cn/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html


核心概念

介紹

Ember.js是一個Javascript MVC (Model View Controller的簡寫) 框架:

Model - 模型:儲存從伺服器獲得的數據
View - ◣視圖◥:處理模板及使用者在頁面的互動
Controller - 控制器:管理多個模型,並將資料傳遞至模板

使用MVC框架的好處為:方便組織和管理,提升更新/增加功能時的效率

Template - 模板

上文提及的「模板」,以Handlebars編寫,亦是Ember.js的主要元素。
Handlebars在基本的HTML上,加上不同的輔助工具 (helper),大致分為:
  • Expressions - 表達式:{{property}} 表示模型物件的屬性
  • 功能類:如 {{if}} {{each}} {{action}} 等
  • Outlets - ◣插座◥:{{outlet}} 預留位置,用作轉換不同模板
  • Views - 視圖:{{view name}}  插入視圖至模板中

Router - 路由器

頁面上的互動,或稱為狀態的管理就由路由器來負責。
簡單來說是跟據網址 (URL) 建立模型(Model),顯示相關的模板。