我吃西红柿,新寡妇村传奇

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

走進Ember.js

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

站在用戶的角度思考問題，與客戶深入溝通，找到鶴峰網(wǎng)站設(shè)計與鶴峰網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鶴峰地區(qū)。

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

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

我最近采訪了Ember.js團隊;那是多么的讓人激動人心,去知道了解最新的,最熱的:Ember.js

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

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

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

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

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

核心概念

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

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

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

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

 
 
 
  
  
     
  
   {{#each people}}   
  
     
Hello, {{name}}!   
  
   {{/each}}

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

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

配置Ember

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

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

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

Ember 1.0 RC1
Handlerbars 1.0 RC3
jQuery 1.9.1

現(xiàn)在有一個基本的html頁面模版,它包含所有相關(guān)的框架(JQuery，Ember等)。并且包括一個Handlebars例子和一個基本的Ember的應(yīng)用,這個應(yīng)用叫"app.js"。

Ember相關(guān)

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

模版

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

 
 
 
  
  
     
  
       {{firstName}} {{lastName}}

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

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

#p#

路由

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

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

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

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

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

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

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

模型

一個對象數(shù)據(jù)展示。

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

視圖

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

命名約定

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

控制

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

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

你能夠存儲你的應(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

標(biāo)題名稱：走進Ember.js
瀏覽地址：http://fisionsoft.com.cn/article/dhdjcep.html

新聞中心

{{firstName}} {{lastName}}

其他資訊