【Ember.js入門 2.1】模板: Handlebars基礎

Handlebars基礎

Ember.js使用 Handlebars模板庫 來增強用戶介面。
Handlebars與普通HTML相似，但提供了能改變顯示內容的嵌入表達式 (embed expressions)。
渲染模板後，不需要額外的代碼，內容就能自動更新。

如果你習慣基於縮排的語法，可以熟習Handlebars後嘗試 Emblem.js。

【Ember.js入門 1.2】應用程式: 應用模板

應用模板

應用開始時，預設的模板就是應用模板。

你應該將頁首(header)、註腳(footer)和其他裝飾性內容放進此模板。
另外，至少放置一個{{outlet}} :一個佔位符，讓路由器根據應用當前的狀況，渲染適合的模板。

【Ember.js指南 1.1】應用程式: 介紹

建立一個應用程式

首先，要建立一個Ember.Application的實體：

window.App = Ember.Application.create();

我們把應用命名為App，你亦可以改一個有意義的名字。

擁有一個應用物件(Object)，有幾個重要的原因：

• 它是應用的命名空間(namespace)，應用的所有類(classes)都是這物件的屬性(properties)。如：App.PostsView和App.PostsController。這能避免全域變數的污染。
• 它幫你監聽網頁的事件，並負責傳送事件到視圖。
• 它會自動渲染應用模板—─模板的基礎/根，其他模板都會渲染到此模板
• 它會自動建立路由器，並基於目前的URL進行路由。

翻譯自：http://emberjs.com/guides/application/
參考：http://emberjs.cn/guides/application/

【Ember.js指南 序二】命名慣例

為了統一整個應用程式，Ember.js規定了各元素的命名慣例。

應用程式

假設你把網站命名為 App ，當Ember.js初始化時，將首先尋找以下的物件(Object)：

• App.ApplicationRoute
• App.ApplicationController
• application/未有命名的 模板 (模板將於第三部分介紹)

Ember.js首先會渲染application作為主模板，並將其連結至App.ApplicationController(如有設置)，這樣模板就可以使用ApplicationController的屬性。

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指南目錄

---

核心概念

介紹

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)，顯示相關的模板。