Ember.js 目前非常流行的H5框架

8gw234 9年前

Ember.js是一个MVC的JavaScript框架，由Apple前雇员创建的SproutCore 2.0改名进化而来，号称「A framework for creating ambitious web applications」。
Ember.js 目前非常流行的H5框架

简介

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

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

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

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

核心概念
上手Ember.js，必须先理解几个核心概念。

我们希望开发者能够建立雄心勃勃的、与原生应用抗衡的大型web应用，要做到这一点，必须拥有先进的工具和正确的概念，以帮助开发者进行沟通协作。

我们耗费了大量时间去参考原生应用框架的思想，比如Cocoa，但是那些概念不仅没能形成帮助，反而还成为了一种障碍，而且，有些概念确实也并不适合 web开发的特征。于是我们转去向其他一些流行的开源项目寻找灵感，比如Ruby on Rails以及Backbone.js。

因此，Ember.js是一个综合体，它结合了原生应用的强大，且兼具现代网络的轻量与敏捷。

概念
模板 TEMPLATES
Ember.js使用Handlebars模板引擎定义应用程序的用户界面，模板里可以包含HTML以及以下内容：

表达式（Expressions）：比如{{firstname}}，用来提取控制器或者模型中的信息，将之转换成HTML，并且保持自动更新。

插口（Outlets）：给其他模板预留的占位符，当用户操作应用程序的时候，路由器可以控制不同的模板接入到插口的位置。通过{{outlet}}标记可以在模板里创建插口。

视图（Views）：负责处理用户事件，通过{{view}}标记在模板里创建。

视图 VIEWS
嵌入在模板里的视图负责将原始事件（比如点击、手势、滑动）转换成应用里定义的事件，并将事件发送给控制器。

比如，视图可以将click事件转换成更有意义的deleteItem事件，并发送给控制器。如果控制器没有实现deleteItem事件，则事件会发送给当前的路由器。

控制器 CONTROLLERS
控制器储存应用程序状态，模板用来连接控制器，并将控制器的当前状态转换成HTML。

控制器通常用来为模板描述模型，在这种情况下，控制器将模型的属性传给模板，并以模板期望的方式修改或增加模型。

模型 MODELS
模型用来处理持久化的数据，比如在应用程序中由用户赋值的数据。模型对象一般由服务器加载，当客户端做出修改的时候，再存回服务器。

通常来说，数据可以转换为JSON格式由服务器传递给Ember.js的模型，实现关联、属性计算，以及其他一些功能。

路由器 ROUTER
路由器负责管理应用程序的状态。

当用户启动应用程序，它会检查URL，确保载入正确的模板进行展示，并为模板解析相应的模型对象。

当应用程序在运行到不同状态时，路由器会自动更新URL，用户可以保存URL，以便返回之前的一些状态，或者通过URL与其他用户分享当前页面。

上面这些就是开发Ember.js应用程序需要了解的核心概念。我们设计的系统支持复杂的扩展，如果你能遵循这些基本内容，在增加新功能的时候就不必回溯整个系统。

我们认为，让多个开发者通过框架的模式，对一个问题在解决方式上达成一致是很重要的。现在已经解释了一些基本对象所扮演的角色，接下来就要深入Ember.js，了解各个部分的细节和工作方式。

创建一个应用程序
创建Ember.js应用程序的第一步是创建一个Ember.Application类的实例化对象：

window.App = Ember.Application.create();

里将实例化的对象命名为App，开发者可以根据应用程序的用途，选择意义相符的名字。

创建一个应用程序的实例对象非常重要，原因如下：

定义应用程序的命名空间，所有类都定义成该对象的属性（比如App.PostsView、App.PostsController）。这样做可以避免污染全局作用域。

在document上增加事件监听，并负责将事件发送给视图。

自动渲染模板，包括根模板，以及其他放入根模板的模板，都将被渲染。

基于当前URL创建路由器并开始路由。
应用程序模板
应用程序模板是应用程序启动时被渲染的默认模板，模板内应该包含header、footer以及其他一些修饰内容。另外，还应该包含至少一个{{outlet}}占位符，路由器会根据应用程序的状态，在这里插入相应的模板。

例：

header和footer会保持不动，而div里的内容会被改变，比如用户将URL路径定位到/posts或/posts/15，div里的内容就会做出相应变化。

如果在HTML里保存模板，可以创建一个匿名的script标签，它将会被自动调用到屏幕上。

如果使用工具加载模板，一定要给模板命名为application。