Ember和Ember CLI入门

逄宁

2023-12-01

这些年来，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应用程序的入口点。路由是使用Router在文件app/router.js中定义的。他们使您可以访问应用程序的不同部分。例如，如果您决定需要管理应用程序中的用户，则必须定义users路由。您可以使用以下语法执行此操作：

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

这将为我们创建以下URL：

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

按照惯例，当您定义路线时，Ember希望找到其他关联的类型，例如路线，控制器和模板。我们可以决定显式创建这些类型，也可以允许Ember为我们创建它们。在许多应用程序中，您很可能必须自己创建它们，但这取决于您。

请记住，区分Router和Route至关重要。我们上面创建的URL结构是使用Router完成的。这些仅表明我们打算在应用程序中提供这些URL。我们尚未创建实际的路由，仅创建了这些路由的URL。要创建Route ，我们必须在Routes文件夹中按照此过程进行操作。如果您感到困惑，请不要担心，因为我将在本文后面加深该主题。

控制器

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

模板

该模板是Ember的演示部分。您可以使用一种称为Handlebars的模板语言来编写它，该语言可以编译为纯HTML。模板位于app/templates文件夹中。

组件

组件是很少的独立功能。您可以将它们视为可重复使用且易于维护的演示文稿和功能的组合。

灰烬数据

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

应用程序

我们将要构建的联系人管理应用程序将包括具有可用联系人信息的用户列表。该应用程序将允许我们创建，编辑，删除和查看用户。

为了使我们的应用程序简洁明了，我们将使用Ember CLI附带的夹具适配器。除了在刷新页面后不会保留任何数据外，这充当后端。首先，如果尚未完成，请使用ember new contactmanager创建一个新的Ember项目。

生成用户模型

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

ember generate model user

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

import DS from 'ember-data';

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

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

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

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

产生使用者路线

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

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

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

ember generate route users

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

import Ember from 'ember';

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

设置装置数据并生成用户模板

现在，让我们向应用程序中添加一些临时数据。为此，运行命令

ember generate adapter application

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

import DS from 'ember-data';

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

并将以下内容添加到您的用户模型中，以创建一些灯具。

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

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

ember generate template users

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

<ul>
  {{#each user in model}}
    <li>{{user.firstName}} {{user.lastName}} <span>Edit</span></li>
  {{/each}}
</ul>
{{outlet}}

现在，您应该看到一个用户列表，每个用户旁边都有一个编辑文本。由于灯具数据中只有一个用户，因此我们只会看到一个用户。随意根据需要向用户设备添加更多用户对象。只需确保每个人都有一个唯一的ID。

显示一个用户

现在我们已经列出了我们的用户，让我们看看一种显示用户完整信息的方法。首先。通过将li元素更改为如下所示来更改users模板中的代码：

<li>
   {{#link-to 'users.show' user}} {{user.firstName}} {{user.lastName}} {{/link-to}}
   <span>Edit</span>
</li>

这应该在每个用户名的周围加上一个链接。当您单击链接时，仅URL应被更改，而页面上的所有内容均保持不变。这是因为我们尚未生成单个用户模板。

运行命令：

ember generate template users/show

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

<p>{{#link-to 'users' }}back{{/link-to}} to Users</p>
<p>First Name: {{model.firstName}}</p>
<p>Last Name: {{model.lastName}}</p>
<p>Address: {{model.addressLine}}</p>
<p>Postcode: {{model.postCode}}</p>
<p>Country: {{model.country}}</p>

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

编辑一个用户

如果要编辑单个用户，则只需执行几个简单的步骤。首先，通过使用链接将每个用户名旁边的“ Edit文本包裹起来，首先链接到用户编辑路径。然后，将“ Edit更改为

{{#link-to 'users.edit' user }}Edit {{/link-to}}

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

ember generate controller users/edit

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

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    saveUser: function(user){
      user.save();
      this.transitionToRoute('users');
    }
  }
});

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

ember generate template users/edit

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

<p>{{#link-to 'users' }}back{{/link-to}} to Users</p>
<form {{action 'saveUser' model on='submit' }} >
  <p>First Name: {{input value=model.firstName}}</p>
  <p>Last Name: {{input value=model.lastName}}</p>
  <p>Address: {{input value=model.addressLine}}</p>
  <p>Postcode: {{input value=model.postCode}}</p>
  <p>Country: {{input value=model.country}}</p>
  <p><input type="submit" value="Save" ></p>
</form>

提交表单时，此代码在控制器上调用saveUser()函数。该功能会传递给正在编辑的用户，并保存修改后的信息。

进行此更改后，单击用户的编辑链接时，可以编辑其详细信息。单击保存按钮可以将它们保存，然后将其重定向回用户列表。欢呼！现在，我们有一个简单的联系人列表管理器。

您可以将其挂接到真正的后端，从而在整个页面刷新期间保留数据，从而将其变成完整的应用程序。我还鼓励您向应用程序中添加删除功能，以便您可以随时删除不需要的用户。

结论

Ember 是用于构建雄心勃勃的Web应用程序的框架。它具有约定胜于配置的理念，这意味着它基于几个常见的决策，并且具有许多默认设置（约定），使您的开发过程更加轻松。这样，您在开发过程中不必做很多琐碎的决定。

我希望您喜欢阅读本教程，并学习了一些有关如何在项目中使用如此强大但简单的JavaScript框架的新知识。请在下面的评论中让我们知道您的想法。您可以在GitHub上找到该应用程序的代码。

From: https://www.sitepoint.com/getting-started-with-ember-and-ember-cli/