走进 Ember.js_1
现在有很多的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的数组和并且无序的展示它们：
- <ull9IC2class="tag">>
- {{#eachpeople}}
- <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"。
- <scriptsrc="js/libs/jquery-1.9.1.js"></script>
- <scriptsrc="js/libs/handlebars-1.0.0-rc.3.js"><f8DUw/script>
- <scriptsrc="js/libs/ember-1.0.0-rc.1.js"></script>
- <scriptsrc="js/app.js"></script>
Ember相关
在我们开始编写代码前,理解Ember.js工作原理是非常重要的。你聚集相关模块组成你的Ember应用。让我们看看其它部分和他们之间的相关联系。
模版
对你的接口来说,模版是一个关键的部分。正如我原先提到的, Handlebars是一个客户端框架被用在Ember里面。对你的应用来说,表达式可以扩展,当你创建界面的时候。这里有一个简单的例子:：
- <scripttype="text/x-handlebars">
- <h2><strong>{{firstName}}{{lastName}}</strong></h2>
- </script>
注意：通过Ember,表达式组成了HTML页面,可以动态的改变页面的内容。在这个例子中, {{firstName}} 和 {{lastName}} 占位符在应用中将会被数据替代。
通过灵活的API,Handlebars 可以提供强大的功能。它提供什么功能对你来说是非常重要。
路由
一2N20D个应用的路由帮助管理应用的状态
一个应用的路由帮助管理应用的状态和相关资源需要被用户导航。路由可以包含相关任务例如从模型中获取数据,转化控制去视图,或者展示模版。
在你的应用中,你能够创建一个路由为特定的坐标。路由指定应用的部分和URLs相关去它们。URL是关键标识符,Ember判断哪个应用状态需要展现给用户通过它。
- App.Router.map(function(){
- this.route('about');//Takesusto"/about"
- });
当用户导航专门的URL的时候,Ember实例化路由管理着路由的行为(例如:从模型请求数据)。一个例子从模型请求数据,像这样：
- App.EmployeesRoute=Ember.Route.extend({
- model:function(){
- returnApp.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
【编辑推荐】