Ember.js v4.10.0 官方版

Ember.js官方版是一款非常专业且优秀的JavaScript框架，采用基于字符串的Handlebars 模板，支持双向绑定、观察者模式、计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等，该框架最大的特点就是高效，而且经过了实践检验，非常适合开发人员使用，提供了丰富且强大的功能，便于管理现代Web应用程序，可有效帮助开发团队提高生产力，Ember.js是一个开源的JavaScript客户端框架，用于开发Web应用程序并使用MVC（模型 - 视图 - 控制器）架构模式。在Ember.js中，路由用作模型，句柄模板作为视图，控制器处理模型中的数据，Ember.js也可以与任何类型的后端一起使用，欢迎有需要的用户下载体验

Ember.js软件功能

Ember CLI

一个强大的开发工具包，用于创建，开发和构建Ember应用程序。从CLI指南中了解基本命令。

组件

Ember应用程序中使用的基本结构，用于创建可重用的UI元素并定义应用程序的布局和功能。

路由

Ember应用程序的核心部分。使开发人员能够从URL驱动应用程序状态。

服务

在应用程序中存储长期状态并将其传递的方式。

Ember数据

Ember数据提供了与外部API进行通信和管理应用程序状态的一致方式

Ember Inspector-浏览器扩展或书签，用于实时检查您的应用程序。这对于在野外发现Ember应用程序，尝试安装它并打开NASA网站也很有用！

Ember.js软件特色

1、Ember CLI：开辟Ember运用顺序的官方指令行东西包。查

2、Ember Inspector：阅读器插件/书签，可帮忙您检阅和调试运用顺序。

3、动画的Ember：Ember的焦点动画基元。

4、Ember Twiddle：在线代码编纂器，是以您可以同享有用的代码片断或毛病的复成品。

5、FastBoot： Ember运用顺序的服务器端显现库。

6、Ember Engines： Ember插件，许可从用户的角度将多个逻辑运用顺序组合到一个运用顺序中。

7、Ember Observer：Ember Observer为已公布的Ember插件供给分类和评分。

Ember.js官方教程

安装Ember

您可以使用Node.js软件包管理器npm的单个命令安装Ember。在您的终端中输入以下内容：

创建一个新的应用程序

通过npm安装Ember CLI后，您将可以ember在终端中访问新命令。您可以使用该ember new命令来创建新的应用程序。

这个命令将创建一个名为的新目录，ember-quickstart并在其中建立一个新的Ember应用程序。该--lang en选项将应用程序的主要语言设置为英语，以帮助改善可访问性。开箱即用，您的应用程序将包括：

开发服务器。

模板编译。

JavaScript和CSS压缩。

通天塔的现代特色。

通过以集成的软件包提供构建生产就绪的Web应用程序所需的一切，Ember使开始新项目变得轻而易举。

让我们确保一切正常。 cd进入应用程序目录ember-quickstart并通过键入以下命令启动开发服务器：

几秒钟后，您应该看到如下所示的输出：

（要随时停止服务器，请在终端中键入Ctrl-C。）

http://localhost:4200在您选择的浏览器中打开。您应该看到一个Ember欢迎页面，而没有其他内容。

恭喜你！您刚刚创建并启动了第一个Ember应用程序。

在模板中编写一些HTML

我们将从编辑application模板开始。用户加载您的应用程序时，该模板始终显示在屏幕上。在编辑器中，打开app/templates/application.hbs并将其更改为以下内容：

Ember检测到更改后的文件，并在后台自动为您重新加载页面。您应该看到欢迎页面已被“ PeopleTracker”替换。您还{{outlet}}向此页面添加了，这意味着所有路由都将在该位置呈现。

定义路线

让我们构建一个显示科学家列表的应用程序。为此，第一步是创建一条路线。现在，您可以将路由视为组成您的应用程序的不同页面。

Ember带有生成器，用于自动执行常见任务的样板代码。要生成路线，请在ember-quickstart目录的新终端窗口中键入以下内容：

您将看到如下输出：

那是Ember告诉您它已经创建了：

用户访问时要显示的模板/scientists。

一个Route是获取由模板中使用的模型对象。

应用程序路由器中的一项（位于中app/router.js）。

此路线的单元测试。

在中打开新创建的模板，app/templates/scientists.hbs然后添加以下HTML：

在浏览器中，打开http://localhost:4200/scientists。你应该看到

我们把在scientists.hbs模板正下方的

从我们的application.hbs模板。

由于科学家路线嵌套在应用程序路线下，因此Ember会将其内容呈现在应用程序路线模板的{{outlet}}指令中。

现在我们已经有了scientists模板渲染，让我们给它一些数据进行渲染。为此，我们可以为该路线指定一个模型，也可以通过编辑来指定一个模型app/routes/scientists.js。

我们将使用生成器为我们创建的代码，并向中添加一个model()方法Route：

此代码示例使用JavaScript的称为类的功能。了解有关最新JavaScript功能的概述，以了解更多信息。

在路线的model()方法中，您返回要提供给模板的所有数据。如果您需要异步获取数据，则该model()方法支持使用JavaScript Promises的任何库。

现在，让我们告诉Ember如何将字符串数组转换为HTML。打开scientists模板并添加以下代码以遍历数组并打印：

在这里，我们使用each 帮助程序来循环从model()挂钩提供的数组中的每个项目。对于数组中的每个项目（本例中的每个科学家），Ember都会渲染一次包含在帮助器中的块{{#each}}...{{/each}}。当前正被呈现的项目（科学家）将在被提供scientist可变的，并标示为 as |scientist|在each帮手。

最终结果是，无序列表

中的数组中将有一个元素对应于每个科学家

创建一个UI组件

随着应用程序的增长，您会注意到您正在多个页面之间共享UI元素，或者在同一页面上多次使用它们。使用Ember可以轻松地将模板重构为可重用的组件。

让我们创建一个可在多个地方使用的组件，以显示人员列表。

像往常一样，有一个发电机使我们很容易做到这一点。通过键入以下内容来制作新组件：

将scientists模板复制并粘贴到组件的模板中，然后对其进行编辑，如下所示：

请注意，我们已将标题从硬编码字符串（“科学家名单”）更改为{{@title}}。该@表明@title的是，将被传递到组件，这使得它更容易重复使用相同的组件中，我们正在构建的应用程序的其他部分的参数。

我们还重命名scientist为更通用的person，从而减少了组件与使用位置之间的耦合。

根据文件系统上的名称，我们的组件称为。请注意，字母P和L大写。

Ember.js更新日志

1、优化了用户使用界面

2、修复了某些已知bug