UDH Web 框架 简介

- --- Ember. js

目录

1. 相关概念

2. 模块详解

2.1. 应用

2.2.index.html

2.3. 模板

2.4. 路由器

2.5. 控制器

2.6. 模型

2.7. 视图

UDH 的 Web 框架 基于Ember.js 搭建 。Ember.js 是 基于javascript的一个 开源的 MVC web 框架 ， 它能够 将本地GUI框架中的工具和概念与Web应用的URL 结合 在一起 ， 致力于 建立 强大 而 丰富的web界面。

1.   相关 概念

MVC 的web框架一般具有模型、视图 以及 控制 器 三部分，ember也不例外，但是，相比于其他的MVC框架，它具有 更 丰富的 模块化机制 ， 一般 包括 六种模块 ： 模板 、路由、 控制器 、视图、模型 以及 应用 ， 另外，一个完整的 ember web 应用 还需要一个 唯一 的 index.html 。

其中 各个 模块 的关系由上图所示 。

2.   模块详解

2.1.          应用

应用 ，即命名空间， 整个 ember 框架 中 仅 包含一个应用， 相当于 生成一个 ember 的应用实例 ：

只有 生成了ember 的 应用实例，该实例的模块才是 有意义的， 如路由：App.ApplicationRoute ，控制器: App.ApplicationController ， 视图 ： App.ListView 都 需要 依据 此命名。

2.2.          in dex.html

整个 web 应用只包含 一个html文件， 通常 命名为index.html 。 因此，可以说ember是一个单页面的 web 应用 。 index.html 文件 中 通常 并不包含实际的代码 ， 仅引入一些必须的javascript 文件 。 在 index.html之上， 通过添加 不同的模板来显示界面。

2.3.          模板

模板 主要 用于渲染显示给用户的 界面 ， 主要基于 Handlebars模板语言编写 ，与 纯HTML较为类似，只是 定义 了 一些 其特有的 表达 ：

例如 表达式 {{serviceName}}, 该语句 可以 实现 从 一个 模型 中 获取 一个 服务名并将 该 服务名添加到HTML中 ， 并能够实现动态绑定 。

每个模板 都对应着 一个具体的模型，当模型发生改变时，模板 也会 自动进行更新。

另外 ，模板还 需要 一个 出口（Outlets） , 它 类似 其他模板的占位符 ， 可以在具有{{outlet}} 表达式 的模板上添加其他模板， 实现 模板的叠加，为 用户 展示更复杂的界面。

应用模板 (即图中 的Application.hbs ) 是应用启动的时候默认渲染的模板 。 应用模版中至少需要一个{{outlet}}占位符，以便路由能根据当前的URL将适当的模版渲染进来 。

2.4.          路由器

路由器 相当于 页面 的 导航， 它 能够引导用户 到达下一个 模板显示的内容， 例如 在UDH中，从“ 仪表板 ” 页面 跳转到“ 服务 ” 页面，用户 能够正确的看到“ 服务 ” 界面 的内容而不是“ 主机 ” 界面 的内容，是路由器在 发生 作用 ，它 将URL转换为一系列内嵌的有 “服务 ” 相关模型 数据支撑的模板。 因此 ，当显示给用户的模板和模型发生改变时，Ember自动更新浏览器地址栏中的URL。

由于 路由器的作用，用户可以在任意 模板 上 分享 链接。 当某个用户点击了这个链接时，将看到与分享链接的用户看到的相同内容。

2.5.          控制器

控制器 ，主要 用于定义属性和行为， 处理 由 视图或 模板直接传递的 信息 ， 同时 ， 控制器 可以代理一个模型，

控制器可以完成以下工作：

          为模板代理一个模型 ， 有时可以将 模型 中要 定义 的 属性 放在控制器定义；

          存放不需要服务器保存的应用属性

Ember.js将这些状态封装在路由器里，这意味着控制器可以更轻量，且更专注一件事。

2.6.          模型

模型 用于 存储 持久化状态 数据 ， 类似 于Java中 的对象 ， 通常用于构造 包含多种 属性 和 行为的 数据 结构。 由 上图 可以 看出，模型既可以在控制器 中 定义，也可以在路由器中定义。

例如 ，UDH中定义service模型：

其中主要定义 了service的名字、状态 、 快速链接 等的 属性 ，主要 用于存储服务相关的数据。

模型 通常用于构造应用操作的数据，也用来返回给用户数据。这些对象通常从服务器端加载，并当其在客户端发生改变后又保存到服务器端。

2.7.          视图

视图 ， 顾名思义，就是 用于 为web应用 创建可视化，它位于 模板之上， 可以 将一个浏览器中的事件，转换成应用中定义的事件。

通常 ，Ember.js的视图 的创建 主要基于以下两个目的：

          需要处理复杂的用户事件 ： 例如 点击事件 ，可将 具体 的 点击 动作传给控制器，让 控制器 进一步处理 ， 产生相应的操作 ；

          构建可重用的组件 ： 例如 UDH 中各显示 指标图表 ， 都是 基于 同一个 父视图 进行 创建 的。

以上是 对ember.js 的各 模块的简单介绍，了解各模块 功能有助于 创建 自己 的ember web 应用 。