走进 Ember.js-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