走进 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。这是一个简单开始的例子。到目前位置,它包含

现在有一个基本的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>

注意:app.js不是这个框架的一部分。它仅仅是一个Javascript文件,你可以任意的命名它。在使用的时候,我们仅仅用它来当作例子。你可能分离JavaScript文件为多个文件在你的网站和应用里面。同样的道理,对框架文件来说,Ember不希望有一个专门的目录结构。

当你刚开始看代码例子时候,它看起来像传统的网站代码。在某些方面,你是对的!一旦我们组织某些事情的时候,你将会感觉Ember应用是不一样。

Ember相关

在我们开始编写代码前,理解Ember.js工作原理是非常重要的。你聚集相关模块组成你的Ember应用。让我们看看其它部分和他们之间的相关联系。

模版

对你的接口来说,模版是一个关键的部分。 正如我原先提到的, Handlebars是一个客户端框架被用在Ember里面。对你的应用来说,表达式可以扩展,当你创建界面的时候。 这里有一个简单的例子:

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

注意:通过Ember,表达式组成了HTML页面,可以动态的改变页面的内容。在这个例子中, {{firstName}} 和 {{lastName}} 占位符在应用中将会被数据替代。

通过灵活的API,Handlebars 可以提供强大的功能。它提供什么功能对你来说是非常重要。


路由

一个应用的路由帮助管理应用的状态

一个应用的路由帮助管理应用的状态和相关资源需要被用户导航。路由可以包含相关任务例如从模型中获取数据,转化控制去视图,或者展示模版。

在你的应用中,你能够创建一个路由为特定的坐标。路由指定应用的部分和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' );
});

我将要命名我的组件,像这样:

使用命名约定有2个目的:第一,它给你语义之间关系像组件一样。第二:Ember能够自动创建不存在的对象(例如:路由对象或者一个控制器)并且让他们组合在一起在你的应用中。这就是我前面提到的神奇之处。事实上,当你实例化应用对象时,Ember创建一个全局应用变量。
var App = Ember.Application.create();

上面这一行创建了应用的默认路由,控制,视图和模版的句柄

返回我前面创建的"employees"路由。当一个用户导航"/employees"在应用中,这将会发生什么, Ember 将会寻找下面这些对象:

假如它没有找到它们,它会创建每一个实例,但是不会呈现任何内容。因为你没有指定一个模型去获取数据或者模版去呈现数据。那就是为什么命名约定是那么的重要。通过相关的路由,Ember会自动懂得如何去操作相关任务并且不需要你手动去串联它们。

注意:在第一个例子里面,我用单数"Employee"去定义模型,那是有目的的。"Employees"很自然表明了我工作和0到多个员工。建立一个模型去提供灵活的返回0个或者多个员工是重要的。模型的单数命名约定不是Ember的要求,模型没有知识控制器将在后面用到。所以对一致性来说,灵活的命名根据约定,它们可以简单管理你的代码。

所以,我选择用resource()方法去定义我的路由。因为在这个场景下,面对特定的雇员来说,我可能用嵌套路由去管理它们。我在后面会讨论嵌套的场景。

通过一致性的命名约定,Ember能够轻松绑定组件之间的关系,不需要你去暴露代码之间的关系。

网站所有的详细命名约定在 Ember’s naming conventions,一定要好好读读。

接下来:创建一个应用

在接下来的一个系列,我们会深入编写一个基本的应用。

我们已经熟悉了Ember相关的概念并讨论了这个框架的高层次方面。在接下来的系列,我们会深入编写一个应用。我想要你花少许的时间去看一下Handlebars的文档,感受一下表达式的语法。假如你迫切需要了解少许Ember,停下来到Tuts+ Premium上面看看, 这里提供完整的课程去建立一个完整的Ember-based应用。

当我开始写作这边文章,Ember.js 核心团队的领导Yehuda KatzTom Dale 评审了这篇文章的准确性并提出来许多宝贵细节。 谢谢Ember团队!