探索Emberjs——了解Emberjs

 

简单介绍

Emberjs——一个用于创建 web 应用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等。

Ember使用自身扩展的类来创建Ember对象、数组、字符串、函数，提供大量方法与属性用于操作。

每一个Ember应用都使用各自的命名空间，避免冲突。

Ember采用可嵌套的视图层，使视图变得有层次。

 

构建应用

开始一个应用，需要先使用Ember.Application.create()来创建一个实例。

然后分别定义模型（Model）、视图（View）、控制（Controller）层。

使用extend()方法创建子类，如用Ember.Object.extend()创建一种模型类，用Ember.View.extend()创建视图类，用Ember.Controller.extend()创建控制类。通过create()方法生成实例。

你还需要在HTML页面里使用Handlebars加入模板，以完成视图的显示。

当你与页面进行交互时，视图接收到你的操作，通过控制器将事件传递给模型，模型对数据进行修改，视图监控到模型数据的修改，相应的更新页面。

完成最简单的一个应用，总会包含下面的代码：

/*创建命名空间*/

App = Ember.Application.create();



/*创建应用视图类并指定模板名称，该类会创建一个实例并插入应用的视图层级中作为根视图*/

App.ApplicationView = Ember.View.extend({

  templateName: 'application'

});



/*创建应用控制器类，为视图提供上下文，模板里的内容将由该控制器提供*/

App.ApplicationController = Ember.Controller.extend();



/*创建路由控制，用于在应用的各种状态中前进或后退，也可以通过序列化的URL直接进入到某个状态*/

App.Router = Ember.Router.extend({

  root: Ember.Route.extend({

    index: Ember.Route.extend({

      route: '/'

    })

  })

});





/*初始化应用，启动路由进程，创建视图实例并插入到页面*/

App.initialize();



/*在HTML页面加入模板*/

<script type="text/x-handlebars" data-template-name="application">



</script>

在Ember中默认使用 “application” 作为模板名称，以及作为视图与控制器的前缀。如果用于创建类时，首字母必须大写。

如果未定义ApplicationView或ApplicationController，Ember将会抛出异常提示。

我在这里写了一个简单的示例应用，你现在就可以开始动手跟着做了：探索Emberjs——第一个应用

 

相关资料

12种JavaScript MVC框架之比较：http://news.cnblogs.com/n/144303/

JavaScript宝座：七大框架论剑：http://news.cnblogs.com/n/153121/

点燃圣火！Ember.js 的初学者指南：http://www.adobe.com/cn/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html

Ember.js的视图层：http://emberjs.torriacg.org/guides/view_layer/

Ember.js官方文档（中英对照）：http://ued.github.com/emberjs-doc-cn/

Ember.js API：http://emberjs.com/api/

托管在GitHub上的Ember.js：https://github.com/emberjs

最新的Ember.js文件：https://github.com/emberjs/ember.js/downloads

汇聚关于Ember.js各方面资料的dashboard：http://code418.com/ember.js-dashboard/

使用Ember.js创建的三个示例应用：http://emberjs.com/examples/

使用10+个框架创建Todo应用：http://addyosmani.github.com/todomvc/

我的Ember.js小组：http://home.cnblogs.com/group/102912/

转：http://www.cnblogs.com/linerz/archive/2012/10/27/emberjs-about.html