建站
咨詢
售后
建站咨詢
新聞中心
現(xiàn)在有很多的JavaScript庫,大部分庫都滿足了你的網(wǎng)站有關(guān)DOM的操作。但是當(dāng)前迫切需要去管理單個(gè)應(yīng)用的代碼,這就是為什么新的框架產(chǎn)生啦。
站在用戶的角度思考問題，與客戶深入溝通，找到鶴峰網(wǎng)站設(shè)計(jì)與鶴峰網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鶴峰地區(qū)。
"古話說的好:刀要用在刀刃上。"
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)目。通過我對有些概念理解,我想讓你去加強(qiáng)一些核心概念的理解。通過這種方式,并 且可能學(xué)習(xí)到一些新的技術(shù)。我已經(jīng)盡自己最大的可能讓Ember.js團(tuán)隊(duì)的評審這篇文件的可能性和準(zhǔn)確性,并提出一下寶貴的意見。
在我們開始之前,有一句話：Ember.js對我來說做了這么多神奇的事情。當(dāng)我有時(shí)候看見代碼,自言自語到:"哇,這是怎么做到的啊."我在這里盡我最 大的可能去介紹,但是我不會(huì)深入介紹Ember’s框架的源代碼,我將會(huì)討論如果通過它的API和工具去創(chuàng)建你的應(yīng)用。
因此,我們開始那一步把。
核心概念
Ember.js對傳統(tǒng)網(wǎng)站來說并不是一個(gè)單純的框架
第一件事最好牢記心中,Ember.js對傳統(tǒng)網(wǎng)站來說不是一個(gè)單純的框架。JQuery和MooTools對傳統(tǒng)網(wǎng)站來說更適合。如何你考慮 Ember.js,你的關(guān)注點(diǎn)是可擴(kuò)展的桌面體驗(yàn)。事實(shí)上,框架的口號創(chuàng)建一個(gè)完美的Web的應(yīng)用,這就清楚的告訴你這不是一個(gè)Javascript父框 架。
我原先提到Ember利用了MVC模式,有利于代碼的管理和組織。假如你從來沒有MVC開發(fā)基礎(chǔ),首先你要讀懂這個(gè)的概念。Nettuts+上面有很多很 好的文章對這個(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頁面。對這些嵌入式的頁面表達(dá)式,Ember開發(fā)者能夠綁定數(shù)據(jù),并且快速動(dòng)態(tài)改變它們的展示。舉個(gè)例子來說,我創(chuàng)建一個(gè)模版,能夠接受一個(gè)people的數(shù)組和并且無序的展示它們：
- {{#each people}}
- Hello, {{name}}!
- {{/each}}
注意："#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"。
Ember相關(guān)
在我們開始編寫代碼前,理解Ember.js工作原理是非常重要的。你聚集相關(guān)模塊組成你的Ember應(yīng)用。讓我們看看其它部分和他們之間的相關(guān)聯(lián)系。
模版
對你的接口來說,模版是一個(gè)關(guān)鍵的部分。 正如我原先提到的, Handlebars是一個(gè)客戶端框架被用在Ember里面。對你的應(yīng)用來說,表達(dá)式可以擴(kuò)展,當(dāng)你創(chuàng)建界面的時(shí)候。 這里有一個(gè)簡單的例子:：
注意：通過Ember,表達(dá)式組成了HTML頁面,可以動(dòng)態(tài)的改變頁面的內(nèi)容。在這個(gè)例子中, {{firstName}} 和 {{lastName}} 占位符在應(yīng)用中將會(huì)被數(shù)據(jù)替代。
通過靈活的API,Handlebars 可以提供強(qiáng)大的功能。它提供什么功能對你來說是非常重要。
#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)識符,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è)對象數(shù)據(jù)展示。
在你的應(yīng)用中,模型被應(yīng)用作為一個(gè)對象的數(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)知識,只是對控制來說,會(huì)在以后使用到。
你能夠存儲(chǔ)你的應(yīng)用屬性并將需要的持久化,而且不必要被保存到服務(wù)器上。
- 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
當(dāng)前文章：走進(jìn)Ember.js
網(wǎng)站鏈接：http://www.5511xx.com/article/dhdjcep.html
