最近想使用JSMVC对象项目进行改造,所以调研了下前端的jsmvc的框架,参考了《The top 10 Javascript MVC Frameworks Reviewed》,所以对其中比较推崇的Ember进行了进一步调研,同时翻译了Ember官方的Doc文档。
预览:
目录:
简介
什么是Ember.js ?
Ember.js 与众不同 ?
Ember.js 概览
入门指南
Ember的对象原型
子类化类
重新打开类和实例
计算出的属性(取值器)
计算出的属性(设值器)
观察者[或者理解为监听器]
绑定
什么时候使用 ?
创建一个命名空间
使用Handlebars描述你的UI
Handlebars
Ember.View
Handlerbars基础
{{#if}}, {{else}}, 和 {{#unless}}
{{#with}}
使用{{bindAttr}}绑定元素属性
使用{{bindAttr}}绑定类名称
使用{{action}}处理事件
建立视图层次
{{view}}
设置子视图模版
设置绑定
修改视图的HTML
显示一个元素列表
书写自定义Helper
视图包含的 (一些控件)
深入视图
事件处理
使用Ember.ControllerView手工管理视图
渲染管道
自定义HTML元素
视图上属性绑定
Ember可枚举器的API
什么是可枚举的
Ember中可枚举的
可枚举的接口
内容:
什么是Ember.js
Ember是一个用来创建雄心勃勃 (牛X) 的web应用程序的JS框架,它消除了样本文件并且提供一个标准的应用程序架构。
消除样板文件
对于每一个web应用程序都有一些通用的任务。例如:从服务器取得数据,渲染数据到屏幕上,然后当数据变更的时候更新显示信息。
因为浏览器提供的做这件事情的工具很原始,你最终要一遍又一遍的编写相同的代码。Ember.js提供了一些工具,让你专注于你的应用程序,而不是书写100遍相同的代码。
Ember.js 概览
有三个特性,使得你乐于使用Ember:
绑定
计算出的属性
模版自动更新
绑定:
使用绑定可以是两个不同对象的属性保持同步。你只需要声明一次绑定,然后Ember会确保变化在所有位置进行传播。
以下是如何创建一个对于两个对象的绑定:
1 2 3 4 5 6 7 8 9 10 11 | MyApp.president = Ember.Object.create({ name: "Barack Obama" }); MyApp.country = Ember.Object.create({ // Ending a property with 'Binding' tells Ember to // create a binding to the presidentName property. presidentNameBinding: 'MyApp.president.name' }); // Later, after Ember has resolved bindings... MyApp.country.get('presidentName'); // "Barack Obama" |
绑定允许你构建你的应用程序使用MVC模式,然后Rest很容易知道数据将一直正确的在层与层之间传输。
计算出的属性:
计算出的属性允许你像一个属性一样对待一个function:
1 2 3 4 5 6 7 8 9 10 | MyApp.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() { returnthis.get('firstName') + '' + this.get('lastName'); // Call this flag to mark the function as a property }.property() }); MyApp.president.get('fullName'); // "Barack Obama" |
计算出的属性是有用的,因为它们可以和binding一起协作,就像其他的属性一样。
许多计算出的属性依赖于其他属性。例如,在上面的例子中,fullName属性依赖firstName和lastName来确定它的值。你可以告诉Ember关于这些依赖,像这样:
1 2 3 4 5 6 7 8 9 | MyApp.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() { returnthis.get('firstName') + '' + this.get('lastName'); // Tell Ember that this computed property depends on firstName // and lastName }.property('firstName', 'lastName') }); |
自动更新的模版:
Ember使用Handlebars(一个语义化的模版库)。从你的JS 应用程序取得数据,然后把它带进DOM,创建一个<script>标签,把它放到你的HTML中任何你想要让你的值出现的地方:
1 2 3 | <script type="text/x-handlebars"> The President of the United States is {{MyApp.president.fullName}}. </script> |
这是最好的部分:模版是有意识的绑定。就是说,如果你曾经改变那些用来显示的属性的值,我们将为你自动更新它。因为你已经指定了依赖,改变这些属性也会被很好的反映出来。
希望你可以看清这三个强大的工具是怎么在一起协作的:以一些原始属性开始,然后开始构建更复杂的属性和包含依赖的的计算出的属性。一旦你已经完成了数据的表示,你只需要说明他是如何展现一次的,然后Ember会关注剩下的。不管底层数据的如何变化,无论是来自XHR请求或用户执行操作,你的用户界面总是保持最新的。这就消除了开发人员每天都在努力的所有边缘情况的用例
<!--EndFragment-->
......
先声明由于翻译是我一个人完成,也没有经过其他人的校验,所以错误在所难免,发出来的目的有两个:
一是帮助想使用Ember.js的童鞋,方便阅读和理解。
二是希望大家看后指明其中的错误,使此文档更准确。
详细内容请看附件。