这是 Sourav Lahoti 的客座文章，表达了他对 Ember.js 的看法。

开发人员越来越多地转向客户端框架来简化开发，并且在这方面对好的框架有很大的需求。我们看到了这个领域中有很多参与者，但是对于大量的功能和移动部件，很少有特别突出的——Ember.js 就是其中之一。

那么什么是Ember.js？Ember.js 是一个由 Ember Core 团队（包括 Tom Dale、Yehuda Katz 等）维护的 MVC（模型-视图-控制器）JavaScript 框架。它帮助开发人员创建雄心勃勃的单页面 Web 应用程序，而不会牺牲 Web 的优点：URI 语义、RESTful 架构以及 HTML、CSS 和 JavaScript 的“一次编写，随处运行”的特性。

我们为什么需要关注

Ember.js 与构成当今 Web 的技术紧密结合。它并没有试图将这些技术抽象化。Ember.js 提供了一种简洁一致的应用程序开发模型。如果需要从 HTML 迁移到任何其他技术，Ember.js 框架将随着 Web 前端技术的当前趋势而发展。

它使创建自己的“组件”和“模板视图”变得非常容易，这些视图易于理解、创建和更新。结合其一致的绑定和计算属性管理方式，Ember.js 确实提供了 Web 框架所需的许多样板代码。

核心概念

在使用 Ember.js 时，您会发现一些常见的术语，它们构成了 Ember.js 的基础。

路由

路由对象基本上表示应用程序的状态，并对应于一个 URL。

模型

每个路由都有一个关联的模型对象，其中包含与应用程序当前状态相关的数据。

控制器

控制器用于使用显示逻辑装饰模型。

如果模板与单个模型记录相关联，则控制器通常继承自 ObjectController；如果模板与记录列表相关联，则继承自 ArrayController。.

视图

视图用于向模板添加复杂的事件处理，或向模板添加可重用的行为。

组件

组件是一种专门的视图，用于创建可以在模板中轻松重用的自定义元素。

Ember.js 实践

数据绑定

App = Ember.Application.create();

用户与 Web 应用程序交互时的最终结果

Ember.js 确实支持数据绑定，正如我们在上面的示例中看到的。我们在输入中键入的内容绑定到 name，就像 Echo: 后面的文本一样。当您在一个地方更改文本时，它会自动更新到所有地方。

但这是如何发生的？Ember.js 使用 Handlebars 进行双向数据绑定。用 Handlebars 编写的模板从其控制器获取和设置数据。每次我们在输入中键入内容时，控制器的 name 属性都会更新。然后，模板会自动更新，因为绑定的数据已更改。

使用 Handlebars 的简单名片演示

我们可以使用 Handlebars 创建自己的元素。

HTML

CSS

.vcard {
  border: 1px solid #dcdcdc;
  max-width: 12em;
  padding: 0.5em;
}

.vcard li {
  list-style: none;
}

.vcard .name {
  font-weight: bold;
}

.vcard .email {
  font-family: monospace;
}

label {
  display: block;
  margin-top: 0.5em;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    name: 'Sourav',
    address: '123 M.G Road.',
    city: 'Kolkata',
    zipCode: '712248',
    email: 'me@me.com'
});

组件通过打开一个新的 <script type="text/x-handlebars"> 并使用 data-template-name 属性将其模板名称设置为 components/[NAME] 来定义。

我们应该注意，Web 组件规范要求名称中包含连字符，以便将其与现有的 HTML 标签区分开来。

这里只是触及了表面，还有很多内容。有关更多信息，请随时查看Ember.js 指南。