現(xiàn)在有很多的JavaScript庫,大部分庫都滿足了你的網(wǎng)站有關(guān)DOM的操作。但是當(dāng)前迫切需要去管理單個(gè)應(yīng)用的代碼,這就是為什么新的框架產(chǎn)生啦。

"古話說的好:刀要用在刀刃上。"

Ember.js不想傳統(tǒng)的JQuery那樣,不能給你很好的桌面體驗(yàn),沒有相關(guān) 用列,缺少數(shù)據(jù)綁定,事件,狀態(tài)管理?？偟膩碚f,你可能可以拼湊相關(guān)的插件去實(shí)現(xiàn)這些功能。但是,現(xiàn)在開始有專門的框架出現(xiàn)去解決這些專業(yè)問題。以我看 來,是多么完美的事情啊。古話說的好:"刀要用在刀刃上。"

我最近采訪了Ember.js團(tuán)隊(duì);那是多么的讓人激動(dòng)人心,去知道了解最新的,最熱的:Ember.js

Ember實(shí)現(xiàn)了我上面已經(jīng)描述的功能,它如此的流行讓我想起JQuery怎么讓開發(fā)者快速的入門 。團(tuán)隊(duì)在設(shè)計(jì)方法,采取措施并抽象了很多復(fù)雜性和依靠在大型應(yīng)用多年的實(shí)踐經(jīng)驗(yàn),建立了模型/視圖/控制器在應(yīng)用方面。

通過多部分文章的介紹(它會(huì)逐漸介紹這個(gè)框架的核心概念),我想要讓你加快了解Ember.js。

開始我們以普通的介紹(這篇文章就有介紹),逐漸去創(chuàng)建完善一個(gè)完整的項(xiàng)目。通過我對(duì)有些概念理解,我想讓你去加強(qiáng)一些核心概念的理解。通過這種方式,并 且可能學(xué)習(xí)到一些新的技術(shù)。我已經(jīng)盡自己最大的可能讓Ember.js團(tuán)隊(duì)的評(píng)審這篇文件的可能性和準(zhǔn)確性,并提出一下寶貴的意見。

在我們開始之前,有一句話：Ember.js對(duì)我來說做了這么多神奇的事情。當(dāng)我有時(shí)候看見代碼,自言自語到:"哇,這是怎么做到的啊."我在這里盡我最 大的可能去介紹,但是我不會(huì)深入介紹Ember’s框架的源代碼,我將會(huì)討論如果通過它的API和工具去創(chuàng)建你的應(yīng)用。

因此,我們開始那一步把。

核心概念

Ember.js對(duì)傳統(tǒng)網(wǎng)站來說并不是一個(gè)單純的框架

第一件事最好牢記心中,Ember.js對(duì)傳統(tǒng)網(wǎng)站來說不是一個(gè)單純的框架。JQuery和MooTools對(duì)傳統(tǒng)網(wǎng)站來說更適合。如何你考慮 Ember.js,你的關(guān)注點(diǎn)是可擴(kuò)展的桌面體驗(yàn)。事實(shí)上,框架的口號(hào)創(chuàng)建一個(gè)完美的Web的應(yīng)用,這就清楚的告訴你這不是一個(gè)Javascript父框 架。

我原先提到Ember利用了MVC模式,有利于代碼的管理和組織。假如你從來沒有MVC開發(fā)基礎(chǔ),首先你要讀懂這個(gè)的概念。Nettuts+上面有很多很 好的文章對(duì)這個(gè)主題。當(dāng)你熟悉了這些概念,你會(huì)一目了然。,我常常聽說將后臺(tái)改造成Ember.js事實(shí)上非常簡單的一件事情。因?yàn)镋mber已經(jīng)做了很 多繁重的事情為你,但是開發(fā)者必須已經(jīng)習(xí)慣代碼結(jié)構(gòu)啦

Ember同樣也依賴客戶端模版...有很多。它使用了 Handlebars模版框架,通過一系列表達(dá)式,這個(gè)框架可以為你創(chuàng)建動(dòng)態(tài)的HTML頁面。對(duì)這些嵌入式的頁面表達(dá)式,Ember開發(fā)者能夠綁定數(shù)據(jù),并且快速動(dòng)態(tài)改變它們的展示。舉個(gè)例子來說,我創(chuàng)建一個(gè)模版,能夠接受一個(gè)people的數(shù)組和并且無序的展示它們：

<ul> 
 {{#each people}} 
   <li>Hello, {{name}}!</li> 
 {{/each}} 
</ul> 

注意："#each"是一個(gè)循環(huán)表達(dá)式,列舉每一個(gè)"people"數(shù)組元素,并且替代了"{{name}}"這個(gè)表達(dá)式用一個(gè)真正的值。重要的一點(diǎn)需要注意是{{}}語法是由Handebars去驗(yàn)證表達(dá)式的。這是一個(gè)簡單的例子,我以后會(huì)深入詳細(xì)的介紹它。

Handlebars 是一個(gè)強(qiáng)大的客戶端模版引擎。我推薦不僅僅是查看The Ember向?qū)?而且它自己本身的網(wǎng)站起獲取充分有用的信息。你會(huì)很好的使用它。

配置Ember

Eember.js 依賴傳統(tǒng)的類庫例如 JQuery 和 Handlerbars 。

但是稍等一下,難道我不是說過JQuery和Ember運(yùn)用在不同的地方嗎?是的,我說過。但是這里有一些情況,Ember團(tuán)隊(duì)不想再去重復(fù)創(chuàng)建輪子了.他們選擇JQuery,因?yàn)镴Query是最好的方式去操作DOM,這是一件相當(dāng)完美的事情.同樣的道理,他們?yōu)槭裁慈ミx擇Handlerbars,因?yàn)樗且粋€(gè)相當(dāng)不錯(cuò)的模版,有Yehuda Katz來是實(shí)現(xiàn),他是Ember的核心開發(fā)人員之一。

通過Github依賴庫這個(gè)工具,我們可以通過非常簡單的方式去抓取到我們需要的Ember.js。這是一個(gè)簡單開始的例子。到目前位置,它包含

• Ember 1.0 RC1
• Handlerbars 1.0 RC3
• jQuery 1.9.1

現(xiàn)在有一個(gè)基本的html頁面模版,它包含所有相關(guān)的框架(JQuery，Ember等)。并且包括一個(gè)Handlebars例子和一個(gè)基本的Ember的應(yīng)用,這個(gè)應(yīng)用叫"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相關(guān)

在我們開始編寫代碼前,理解Ember.js工作原理是非常重要的。你聚集相關(guān)模塊組成你的Ember應(yīng)用。讓我們看看其它部分和他們之間的相關(guān)聯(lián)系。

模版

對(duì)你的接口來說,模版是一個(gè)關(guān)鍵的部分。 正如我原先提到的, Handlebars是一個(gè)客戶端框架被用在Ember里面。對(duì)你的應(yīng)用來說,表達(dá)式可以擴(kuò)展,當(dāng)你創(chuàng)建界面的時(shí)候。 這里有一個(gè)簡單的例子:：

<script type="text/x-handlebars"> 
     <h2><strong>{{firstName}} {{lastName}}</strong></h2> 
</script> 

注意：通過Ember,表達(dá)式組成了HTML頁面,可以動(dòng)態(tài)的改變頁面的內(nèi)容。在這個(gè)例子中, {{firstName}} 和 {{lastName}} 占位符在應(yīng)用中將會(huì)被數(shù)據(jù)替代。

通過靈活的API,Handlebars 可以提供強(qiáng)大的功能。它提供什么功能對(duì)你來說是非常重要。

#p#

路由

一個(gè)應(yīng)用的路由幫助管理應(yīng)用的狀態(tài)

一個(gè)應(yīng)用的路由幫助管理應(yīng)用的狀態(tài)和相關(guān)資源需要被用戶導(dǎo)航。路由可以包含相關(guān)任務(wù)例如從模型中獲取數(shù)據(jù),轉(zhuǎn)化控制去視圖,或者展示模版。

在你的應(yīng)用中,你能夠創(chuàng)建一個(gè)路由為特定的坐標(biāo)。路由指定應(yīng)用的部分和URLs相關(guān)去它們。URL是關(guān)鍵標(biāo)識(shí)符,Ember判斷哪個(gè)應(yīng)用狀態(tài)需要展現(xiàn)給用戶通過它。

App.Router.map( function() { 
   this.route( 'about' ); // Takes us to "/about" 
}); 

當(dāng)用戶導(dǎo)航專門的URL的時(shí)候,Ember實(shí)例化路由管理著路由的行為(例如:從模型請求數(shù)據(jù))。一個(gè)例子從模型請求數(shù)據(jù),像這樣：

App.EmployeesRoute = Ember.Route.extend({ 
   model: function() { 
       return App.Employee.find(); 
   } 
}); 

在這個(gè)例子中,當(dāng)用戶導(dǎo)航應(yīng)用"/employees"這個(gè)欄目時(shí),路由會(huì)發(fā)出請求到模型獲取到所有雇員的信息

模型

一個(gè)對(duì)象數(shù)據(jù)展示。

在你的應(yīng)用中,模型被應(yīng)用作為一個(gè)對(duì)象的數(shù)據(jù)展示。它可以是一個(gè)簡單的數(shù)組格式,數(shù)據(jù)可以通過AJAX請求動(dòng)態(tài)的從RESTful JSON API獲取到。在你的應(yīng)用中, Ember Data 框架提供了載入,映射和更新數(shù)據(jù)去模型。

 視圖

在Ember.js里面,視圖管理著事件。當(dāng)用戶和應(yīng)用之間互相交互時(shí),視圖轉(zhuǎn)換它們,是它們能夠讓應(yīng)用清楚的事件。所以,假如用戶點(diǎn)擊了刪除Employee的按鈕,視圖就是解析了這個(gè)點(diǎn)擊按鈕并且處理它在應(yīng)用當(dāng)前的的狀態(tài)中。

命名約定

Ember.js 通過命名約定這種方式方式,最少的節(jié)約代碼的縮寫。你定義路由(資源)的方式影響了控制,模型,視圖和模版的命名。例如,我創(chuàng)造route,叫做"employees":

控制

控制常常被用作存儲(chǔ)和替代模型數(shù)據(jù)和屬性。它們常常扮演代理角色,給你有訪問模型屬性的權(quán)限和允許模型去訪問他們和展示他們。這就是為什么模型常常被用作去控制相關(guān)。

最主要的一件事情要記住,當(dāng)模型抓取數(shù)據(jù)的時(shí)候,控制自動(dòng)暴露了相關(guān)你應(yīng)用的數(shù)據(jù)。這樣似乎看起來模版和控制非常的緊密。事實(shí)上,模型,它們也沒有相關(guān)知識(shí),只是對(duì)控制來說,會(huì)在以后使用到。

你能夠存儲(chǔ)你的應(yīng)用屬性并將需要的持久化,而且不必要被保存到服務(wù)器上。

App.Router.map( function() { 
   this.resource( 'employees' ); 
}); 

我將要命名我的組件,像這樣：

• 路由對(duì)象: 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