灰烬和Ember CLI入门-js教程-PHP中文网

Ember CLI是一个为Ember构建的命令行工具，它结合了生成器、压缩器、CSS预处理器编译器、自动重载和ES6模块加载器等多种功能。它可以作为Grunt和Gulp等工具的替代方案，用于设置新的Ember项目。
Ember遵循约定优于配置的理念，这意味着它具有许多默认设置，可以简化开发过程。关键元素包括路由、控制器、模板、组件和Ember-Data。
本教程提供了一个分步指南，介绍如何使用Ember CLI构建简单的联系人管理器应用程序。它涵盖了创建新的Ember项目、设置固定数据、生成用户模型和路由、创建用户模板以及添加显示和编辑用户信息的功能。
Ember是一个功能强大的JavaScript框架，适用于构建大型Web应用程序。借助Ember CLI，它提供了一个标准化的开发环境，可以更轻松地管理依赖项、自动化任务和执行最佳实践。

Ember多年来经历了许多变化。其中最大的一次变化是引入了Ember CLI，这是一个为Ember构建的命令行工具。它结合了生成器、压缩器、CSS预处理器编译器、自动重载和ES6模块加载器等多种功能。此命令行工具将帮助您减少在设置Grunt和Gulp等工具上花费的时间。可以说，对于任何全新的Ember项目，它都是这些工具的良好替代方案。在本文中，您将学习如何使用Ember CLI构建简单的联系人管理器应用程序。本教程与我在SitePoint上发布的其他关于Ember的文章略有不同，因为它们没有附带Ember CLI。但是，大多数这些概念仍然适用，因此我建议您查看它们并继续学习。本文的完整代码可在GitHub上找到。

如何安装Ember CLI

要安装Ember CLI，您需要先安装几个依赖项。第一个是Node.js。您至少需要0.12.x版本。接下来，需要安装Bower，可以通过运行以下命令来完成：

npm install -g bower

登录后复制

然后，要安装Ember CLI，请运行以下命令：

npm install -g ember-cli

登录后复制

如何创建一个新的Ember项目

在开始进行精彩的操作之前，您需要打开终端并按顺序执行以下命令，以便创建一个名为contactmanager的新项目文件夹：

ember new contactmanager

登录后复制

第二步，进入目录，然后使用以下命令安装所有npm和Bower依赖项：

cd contactmanager
npm install
bower install

登录后复制

此时，通过执行以下命令启动内置的Ember服务器：

ember serve

登录后复制

您现在可以在URL localhost:4200访问您的新应用程序。这是在本地计算机上运行的Ember应用程序的默认端口，但您可以根据需要更改它。如果您按照所有指示的步骤操作，现在应该在浏览器中看到一个标题，上面写着“欢迎使用Ember”。

Ember约定和结构

在深入构建应用程序之前，让我们回顾一下一些Ember约定。

路由器和路由

路由是Ember应用程序的入口点。路由在app/router.js文件中使用Router定义。它们允许您访问应用程序的不同部分。例如，如果您决定需要在应用程序中管理用户，则必须定义用户路由。您可以使用以下语法执行此操作：

npm install -g bower

登录后复制

这将为我们创建以下URL：

/users/
/users/index/
/users/loading/

按照惯例，当您定义路由时，Ember期望找到其他关联类型，例如路由、控制器和模板。我们可以决定显式创建这些类型，或者允许Ember为我们创建它们。在许多应用程序中，您很可能必须自己创建它们，但这取决于您。请记住，区分路由器和路由至关重要。我们上面创建的URL结构是使用路由器完成的。这些仅显示我们希望在应用程序中使用这些URL的意图。我们还没有创建实际的路由，而只是这些路由的URL。要创建路由，我们必须在routes文件夹中遵循此过程。如果您感到困惑，请不要担心，因为我将在本文后面更深入地探讨此主题。

控制器

控制器是一种用于存储视图状态的类型，位于app/controllers文件夹中。它们与路由协同工作。在这种情况下，上面的URL对应于/user/，并且需要一个名为/users/的控制器。同样在这里，我们可以自由选择是否自己定义它。控制器还定义视图操作（如点击、悬停等）的事件处理程序。

模板

模板是Ember的表示部分。您使用名为Handlebars的模板语言编写它，该语言编译成纯HTML。模板位于app/templates文件夹中。

组件

组件是小的自包含的功能块。您可以将它们视为表示和功能的组合，它们可重用且易于维护。

Ember-Data

这是一个由Ember核心团队维护的库，它补充了Ember核心，并充当管理数据模型的前端ORM。还有其他一些我以前没有使用过的替代方案，并且不在本文的讨论范围之内，因为我们将使用Ember-data。

应用程序

我们将构建的联系人管理应用程序将包括一个用户列表及其可用的联系信息。该应用程序将允许我们创建、编辑、删除和查看用户。为了使我们的应用程序简洁明了，我们将使用Ember CLI附带的固定适配器。这充当后端，除了数据不会在页面刷新时持久化之外。首先，如果您尚未创建，请使用ember new contactmanager创建一个新的Ember项目。

生成用户模型

移至项目文件夹并使用以下命令生成用户模型：

npm install -g ember-cli

登录后复制

这将在app/models中创建一个名为user.js的文件，其内容如下：

npm install -g bower

登录后复制

进行必要的更改，以使导出语句如下所示：

npm install -g ember-cli

登录后复制

这定义了我们的用户模型将具有的属性。

生成用户路由

现在，将以下几行添加到您的router.js文件中，以便为我们提供一些可用的URL：

ember new contactmanager

登录后复制

我们有三个新的URL。其中一个是列出用户，另一个是查看单个用户，最后一个是编辑用户信息。接下来，让我们使用以下命令创建一个用户路由：

cd contactmanager
npm install
bower install

登录后复制

此路由将用于检索我们的用户列表。使用以下代码段更改其内容：

ember serve

登录后复制

设置固定数据并生成用户模板

此时，让我们向我们的应用程序添加一些临时数据。为此，运行以下命令：

Router.map(function() {
  this.resource('users', function() {});
});

登录后复制

这会在app/adapters/文件夹中生成一个名为application.js的文件。默认情况下，Ember使用RestAdapter查询模型。此适配器假设您有一个后端系统，该系统向您的Ember客户端应用程序提供JSON数据。由于我们没有后端，在这种情况下，我们希望改为使用固定数据。因此，我们将更新适配器代码如下所示：

ember generate model user

登录后复制

并向您的用户模型添加以下内容以创建一些固定装置。

import DS from 'ember-data';

export default DS.Model.extend({
});

登录后复制

如果您导航到URL localhost:4200/users，您只会看到旧的问候消息，而不会看到我们刚刚添加的用户固定数据。要查看用户数据，我们需要使用以下命令为用户创建一个模板：

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});

登录后复制

这会在app/templates/文件夹中创建一个名为users.hbs的文件。打开此文件并将其内容更新如下：

Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});

登录后复制

您现在应该看到一个用户列表，每个用户旁边都有一个编辑文本。因为我们固定数据中只有一个用户，所以我们只会看到一个用户。您可以根据需要向用户固定装置中添加更多用户对象。只需确保每个对象都有一个唯一的ID。

显示单个用户

既然我们已经列出了我们的用户，让我们看看显示用户完整信息的方法。首先。通过将每个用户名旁边的“编辑”文本用链接括起来来更改users模板中的代码。然后，将“编辑”更改为：

ember generate route users

登录后复制

接下来，让我们使用以下命令生成一个用户控制器：

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.find('user');
  }
});

登录后复制

在（用户控制器）内部，将内容更改为如下所示：

ember generate adapter application

登录后复制

完成后，使用以下命令生成一个用于编辑用户的模板：

import DS from 'ember-data';

export default DS.FixtureAdapter.extend({
});

登录后复制

目前，创建的模板（app/templates/users/show.hbs）为空。打开它并添加以下代码：

User.reopenClass({
   FIXTURES: [{
      id: 1,
      firstName: 'James',
      lastName: 'Rice',
      addressLine: '66 Belvue Road',
      postCode: 'M235PS',
      country: 'United Kingdom'
   }]
});

登录后复制

这样做，您应该能够看到您单击的每个用户的完整信息。

编辑单个用户

如果您想编辑单个用户，则必须遵循一些简单的步骤。首先，通过将每个用户名旁边的“编辑”文本用链接括起来来链接到用户编辑路由。然后，将“编辑”更改为：

npm install -g bower

登录后复制

接下来，让我们使用以下命令生成一个用户控制器：

npm install -g ember-cli

登录后复制

在（用户控制器）内部，将内容更改为如下所示：

ember new contactmanager

登录后复制

完成后，使用以下命令生成一个用于编辑用户的模板：

cd contactmanager
npm install
bower install

登录后复制

在新的模板app/templates/users/edit中，粘贴以下代码：

ember serve

登录后复制

此代码在提交表单时调用我们控制器上的saveUser()函数。该函数传递正在编辑的用户并保存修改后的信息。有了此更改，当您单击用户的编辑链接时，您可以编辑其详细信息。当您单击保存按钮时，您可以保存它们，之后您将被重定向回用户列表。万岁！我们现在有一个简单的联系人列表管理器。您可以通过将其连接到真实后端来将其转换为完整应用程序，以便在页面刷新时持久化数据。我还鼓励您向应用程序添加删除功能，以便您可以随时删除不需要的用户。

结论

Emberhttps://www.php.cn/link/0e0f9e664029e8912996d65c1cf09761是一个用于构建大型Web应用程序的框架。它具有约定优于配置的理念，这意味着它基于几个常见的决定，并且具有许多默认（约定），这使得您的开发过程更容易。这样，您在开发过程中就不必做出许多琐碎的决定。我希望您喜欢阅读本教程并学习了有关如何在您的项目中使用如此强大而简单的JavaScript框架的新知识。请在下面的评论中告诉我们您的想法。您可以在GitHub上找到应用程序的代码。

关于Ember入门和Ember CLI的常见问题