走進 Ember.js
現在有很多的JavaScript庫,大部分庫都滿足了你的網站有關DOM的操作。但是當前迫切需要去管理單個應用的代碼,這就是為什么新的框架產生啦。
"古話說的好:刀要用在刀刃上。"
Ember.js不想傳統的JQuery那樣,不能給你很好的桌面體驗,沒有相關 用列,缺少數據綁定,事件,狀態管理。總的來說,你可能可以拼湊相關的插件去實現這些功能。但是,現在開始有專門的框架出現去解決這些專業問題。以我看 來,是多么完美的事情啊。古話說的好:"刀要用在刀刃上。"
我最近采訪了Ember.js團隊;那是多么的讓人激動人心,去知道了解最新的,最熱的:Ember.js
Ember實現了我上面已經描述的功能,它如此的流行讓我想起JQuery怎么讓開發者快速的入門 。團隊在設計方法,采取措施并抽象了很多復雜性和依靠在大型應用多年的實踐經驗,建立了模型/視圖/控制器在應用方面。
通過多部分文章的介紹(它會逐漸介紹這個框架的核心概念),我想要讓你加快了解Ember.js。
開始我們以普通的介紹(這篇文章就有介紹),逐漸去創建完善一個完整的項目。通過我對有些概念理解,我想讓你去加強一些核心概念的理解。通過這種方式,并 且可能學習到一些新的技術。我已經盡自己最大的可能讓Ember.js團隊的評審這篇文件的可能性和準確性,并提出一下寶貴的意見。
在我們開始之前,有一句話：Ember.js對我來說做了這么多神奇的事情。當我有時候看見代碼,自言自語到:"哇,這是怎么做到的啊."我在這里盡我最 大的可能去介紹,但是我不會深入介紹Ember’s框架的源代碼,我將會討論如果通過它的API和工具去創建你的應用。
因此,我們開始那一步把。
核心概念
Ember.js對傳統網站來說并不是一個單純的框架
第一件事最好牢記心中,Ember.js對傳統網站來說不是一個單純的框架。JQuery和MooTools對傳統網站來說更適合。如何你考慮 Ember.js,你的關注點是可擴展的桌面體驗。事實上,框架的口號創建一個完美的Web的應用,這就清楚的告訴你這不是一個Javascript父框 架。
我原先提到Ember利用了MVC模式,有利于代碼的管理和組織。假如你從來沒有MVC開發基礎,首先你要讀懂這個的概念。Nettuts+上面有很多很 好的文章對這個主題。當你熟悉了這些概念,你會一目了然。,我常常聽說將后臺改造成Ember.js事實上非常簡單的一件事情。因為Ember已經做了很 多繁重的事情為你,但是開發者必須已經習慣代碼結構啦
Ember同樣也依賴客戶端模版...有很多。它使用了 Handlebars模版框架,通過一系列表達式,這個框架可以為你創建動態的HTML頁面。對這些嵌入式的頁面表達式,Ember開發者能夠綁定數據,并且快速動態改變它們的展示。舉個例子來說,我創建一個模版,能夠接受一個people的數組和并且無序的展示它們：
- <ul>
- {{#each people}}
- <li>Hello, {{name}}!</li>
- {{/each}}
- </ul>
注意："#each"是一個循環表達式,列舉每一個"people"數組元素,并且替代了"{{name}}"這個表達式用一個真正的值。重要的一點需要注意是{{}}語法是由Handebars去驗證表達式的。這是一個簡單的例子,我以后會深入詳細的介紹它。
Handlebars 是一個強大的客戶端模版引擎。我推薦不僅僅是查看The Ember向導,而且它自己本身的網站起獲取充分有用的信息。你會很好的使用它。
配置Ember
Eember.js 依賴傳統的類庫例如 JQuery 和 Handlerbars 。
但是稍等一下,難道我不是說過JQuery和Ember運用在不同的地方嗎?是的,我說過。但是這里有一些情況,Ember團隊不想再去重復創建輪子了.他們選擇JQuery,因為JQuery是最好的方式去操作DOM,這是一件相當完美的事情.同樣的道理,他們為什么去選擇Handlerbars,因為它是一個相當不錯的模版,有Yehuda Katz來是實現,他是Ember的核心開發人員之一。
通過Github依賴庫這個工具,我們可以通過非常簡單的方式去抓取到我們需要的Ember.js。這是一個簡單開始的例子。到目前位置,它包含
- Ember 1.0 RC1
- Handlerbars 1.0 RC3
- jQuery 1.9.1
現在有一個基本的html頁面模版,它包含所有相關的框架(JQuery，Ember等)。并且包括一個Handlebars例子和一個基本的Ember的應用,這個應用叫"app.js"。
- <script src="js/libs/jquery-1.9.1.js"></script>
- <script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
- <script src="js/libs/ember-1.0.0-rc.1.js"></script>
- <script src="js/app.js"></script>
Ember相關
在我們開始編寫代碼前,理解Ember.js工作原理是非常重要的。你聚集相關模塊組成你的Ember應用。讓我們看看其它部分和他們之間的相關聯系。
模版
對你的接口來說,模版是一個關鍵的部分。 正如我原先提到的, Handlebars是一個客戶端框架被用在Ember里面。對你的應用來說,表達式可以擴展,當你創建界面的時候。 這里有一個簡單的例子:：
- <script type="text/x-handlebars">
- <h2><strong>{{firstName}} {{lastName}}</strong></h2>
- </script>
注意：通過Ember,表達式組成了HTML頁面,可以動態的改變頁面的內容。在這個例子中, {{firstName}} 和 {{lastName}} 占位符在應用中將會被數據替代。
通過靈活的API,Handlebars 可以提供強大的功能。它提供什么功能對你來說是非常重要。
#p#
路由
一個應用的路由幫助管理應用的狀態
一個應用的路由幫助管理應用的狀態和相關資源需要被用戶導航。路由可以包含相關任務例如從模型中獲取數據,轉化控制去視圖,或者展示模版。
在你的應用中,你能夠創建一個路由為特定的坐標。路由指定應用的部分和URLs相關去它們。URL是關鍵標識符,Ember判斷哪個應用狀態需要展現給用戶通過它。
- App.Router.map( function() {
- this.route( 'about' ); // Takes us to "/about"
- });
當用戶導航專門的URL的時候,Ember實例化路由管理著路由的行為(例如:從模型請求數據)。一個例子從模型請求數據,像這樣：
- App.EmployeesRoute = Ember.Route.extend({
- model: function() {
- return App.Employee.find();
- }
- });
在這個例子中,當用戶導航應用"/employees"這個欄目時,路由會發出請求到模型獲取到所有雇員的信息
模型
一個對象數據展示。
在你的應用中,模型被應用作為一個對象的數據展示。它可以是一個簡單的數組格式,數據可以通過AJAX請求動態的從RESTful JSON API獲取到。在你的應用中, Ember Data 框架提供了載入,映射和更新數據去模型。
視圖
在Ember.js里面,視圖管理著事件。當用戶和應用之間互相交互時,視圖轉換它們,是它們能夠讓應用清楚的事件。所以,假如用戶點擊了刪除Employee的按鈕,視圖就是解析了這個點擊按鈕并且處理它在應用當前的的狀態中。
命名約定
Ember.js 通過命名約定這種方式方式,最少的節約代碼的縮寫。你定義路由(資源)的方式影響了控制,模型,視圖和模版的命名。例如,我創造route,叫做"employees":
控制
控制常常被用作存儲和替代模型數據和屬性。它們常常扮演代理角色,給你有訪問模型屬性的權限和允許模型去訪問他們和展示他們。這就是為什么模型常常被用作去控制相關。
最主要的一件事情要記住,當模型抓取數據的時候,控制自動暴露了相關你應用的數據。這樣似乎看起來模版和控制非常的緊密。事實上,模型,它們也沒有相關知識,只是對控制來說,會在以后使用到。
你能夠存儲你的應用屬性并將需要的持久化,而且不必要被保存到服務器上。
- App.Router.map( function() {
- this.resource( 'employees' );
- });
我將要命名我的組件,像這樣：
- 路由對象: App.EmployeesRoute
- 控制: App.EmployeesController
- 模型: App.Employee
- 視圖: App.EmployeesView
- 模版: employees
原文鏈接：http://net.tutsplus.com/tutorials/javascript-ajax/getting-into-ember-js/
譯文鏈接：http://www.oschina.net/translate/getting-into-ember-js?cmp
