JSMVC Ember官方文档翻译

最近想使用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的童鞋，方便阅读和理解。

二是希望大家看后指明其中的错误，使此文档更准确。

详细内容请看附件。

评论

1 楼 linhonghui 2012-12-02  

感谢感谢感谢