走进 Ember.js 已翻译 100%

自由的灵魂 投递于 2013/03/20 09:13 (共 13 段, 翻译完成于 06-30)
阅读 1992
收藏 6
2
加载中
现在有很多的JavaScript库,大部分库都满足了你的网站有关DOM的操作。但是当前迫切需要去管理单个应用的代码,这就是为什么新的框架产生啦。
"古话说的好:刀要用在刀刃上。"

Ember.js不想传统的JQuery那样,不能给你很好的桌面体验,没有相关用列,缺少数据绑定,事件,状态管理。总的来说,你可能可以拼凑相关的插件去实现这些功能。但是,现在开始有专门的框架出现去解决这些专业问题。以我看来,是多么完美的事情啊。古话说的好:"刀要用在刀刃上。"

我最近采访了Ember.js团队;那是多么的让人激动人心,去知道了解最新的,最热的:Ember.js
skyim
翻译于 2013/06/28 17:59
1
Ember实现了我上面已经描述的功能,它如此的流行让我想起JQuery怎么让开发者快速的入门 。团队在设计方法,采取措施并抽象了很多复杂性和依靠在大型应用多年的实践经验,建立了模型/视图/控制器在应用方面。

通过多部分文章的介绍(它会逐渐介绍这个框架的核心概念),我想要让你加快了解Ember.js。

开始我们以普通的介绍(这篇文章就有介绍),逐渐去创建完善一个完整的项目。通过我对有些概念理解,我想让你去加强一些核心概念的理解。通过这种方式,并且可能学习到一些新的技术。我已经尽自己最大的可能让Ember.js团队的评审这篇文件的可能性和准确性,并提出一下宝贵的意见。

在我们开始之前,有一句话:Ember.js对我来说做了这么多神奇的事情。当我有时候看见代码,自言自语到:"哇,这是怎么做到的啊."我在这里尽我最大的可能去介绍,但是我不会深入介绍Ember’s框架的源代码,我将会讨论如果通过它的API和工具去创建你的应用。

因此,我们开始那一步把。

skyim
翻译于 2013/06/29 11:34
1

核心概念

Ember.js对传统网站来说并不是一个单纯的框架
第一件事最好牢记心中,Ember.js对传统网站来说不是一个单纯的框架。JQuery和MooTools对传统网站来说更适合。如何你考虑Ember.js,你的关注点是可扩展的桌面体验。事实上,框架的口号创建一个完美的Web的应用,这就清楚的告诉你这不是一个Javascript父框架。

我原先提到Ember利用了MVC模式,有利于代码的管理和组织。假如你从来没有MVC开发基础,首先你要读懂这个的概念。Nettuts+上面有很多很好的文章对这个主题。当你熟悉了这些概念,你会一目了然。,我常常听说将后台改造成Ember.js事实上非常简单的一件事情。因为Ember已经做了很多繁重的事情为你,但是开发者必须已经习惯代码结构啦

skyim
翻译于 2013/06/29 10:09
1
Ember同样也依赖客户端模版...有很多。它使用了 Handlebars模版框架,通过一系列表达式,这个框架可以为你创建动态的HTML页面。对这些嵌入式的页面表达式,Ember开发者能够绑定数据,并且快速动态改变它们的展示。举个例子来说,我创建一个模版,能够接受一个people的数组和并且无序的展示它们:
<ul>
 {{#each people}}
   <li>Hello, {{name}}!</li>
 {{/each}}
</ul>

注意:"#each"是一个循环表达式,列举每一个"people"数组元素,并且替代了"{{name}}"这个表达式用一个真正的值。重要的一点需要注意是{{}}语法是由Handebars去验证表达式的。这是一个简单的例子,我以后会深入详细的介绍它。

Handlebars 是一个强大的客户端模版引擎。我推荐不仅仅是查看The Ember向导,而且它自己本身的网站起获取充分有用的信息。你会很好的使用它。

skyim
翻译于 2013/06/29 10:37
1

配置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
skyim
翻译于 2013/06/28 17:31
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>

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

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

skyim
翻译于 2013/06/29 23:04
1

Ember相关

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

模版

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

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

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

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


skyim
翻译于 2013/06/29 23:42
1

路由

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

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

在你的应用中,你能够创建一个路由为特定的坐标。路由指定应用的部分和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"这个栏目时,路由会发出请求到模型获取到所有雇员的信息

skyim
翻译于 2013/06/30 11:20
1

模型

一个对象数据展示。

在你的应用中,模型被应用作为一个对象的数据展示。它可以是一个简单的数组格式,数据可以通过AJAX请求动态的从RESTful JSON API获取到。在你的应用中, Ember Data 框架提供了载入,映射和更新数据去模型。

控制

控制常常被用作存储和替代模型数据和属性。它们常常扮演代理角色,给你有访问模型属性的权限和允许模型去访问他们和展示他们。这就是为什么模型常常被用作去控制相关。

最主要的一件事情要记住,当模型抓取数据的时候,控制自动暴露了相关你应用的数据。这样似乎看起来模版和控制非常的紧密。事实上,模型,它们也没有相关知识,只是对控制来说,会在以后使用到。

你能够存储你的应用属性并将需要的持久化,而且不必要被保存到服务器上。

skyim
翻译于 2013/06/30 00:14
1

视图

在Ember.js里面,视图管理着事件。当用户和应用之间互相交互时,视图转换它们,是它们能够让应用清楚的事件。所以,假如用户点击了删除Employee的按钮,视图就是解析了这个点击按钮并且处理它在应用当前的的状态中。

命名约定

Ember.js 通过命名约定这种方式方式,最少的节约代码的缩写。你定义路由(资源)的方式影响了控制,模型,视图和模版的命名。例如,我创造route,叫做"employees":

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

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

  • 路由对象: App.EmployeesRoute
  • 控制: App.EmployeesController
  • 模型: App.Employee
  • 视图: App.EmployeesView
  • 模版: employees
skyim
翻译于 2013/06/30 09:20
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(1)

Movoin
Movoin
"古话说的好:刀要用在刀刃上。" 谁家的古话这样说的?应该是“好钢用在刀刃上”
返回顶部
顶部