在前端开发中，表单是很常见的功能。当表单较为复杂时，把表单拆分成多个步骤会更加方便用户操作。而 npm 包 ember-multi-step 正好提供了这样一种解决方案，它可以帮助我们把表单拆分成多个步骤，让用户更加容易地填写表单，并且减少用户填写错误和重复填写的可能性。本文将详细介绍如何使用 ember-multi-step 实现多步表单。
ember-multi-step 简介
ember-multi-step 是一个包含多个步骤的表单(jQuery based)，它非常适用于那种需要用户多次填写的数据。使用 ember-multi-step，我们可以把表单按照步骤拆分，让用户更容易填写表单，同时也减少了用户填写错误和重复填写的可能性。
安装 ember-multi-step
在使用 ember-multi-step 之前，我们需要先安装它。我们可以通过 npm 来安装 ember-multi-step：
npm install ember-multi-step --save
安装完成后，我们需要先添加文件：
<link rel="stylesheet" href="../node_modules/ember-multi-step/dist/ember-multi-step.css"> <script src="../node_modules/ember-multi-step/dist/ember-multi-step.js"></script>
如上，我们需要添加样式文件和 js 文件，一定要放在 <head> 标签内，确保在加载时先加载这些文件。
如何使用 ember-multi-step
第一步，定义模板文件
我们需要先定义模板文件，把表单拆分成多个步骤。比如，我们要创建一个包含两个步骤的表单，每个步骤包含两个字段。那么，我们可以通过以下方式创建模板文件：
-- -------------------- ---- -------
------- ------------------------ ----------------------------
---------------------
------------- -------- ----------- ----
------- ----------- -----------------
------- ----------- ----------------
---------------
------------- -------- ----------- ----
------- ----------- ---------------
------- ----------- -------------------
---------------
-----------------------
------- ---------- ----------- ---------------------------
------- ---------- ----------- -----------------------
-----------------------
---------------------
---------如上，我们使用了 {{#ember-multi-step}} 来包含整个多步表单，使用 {{#multi-step}} 来包含每个步骤，其中，我们需要指定当前步骤的编号和标题。在每个步骤中，我们可以使用 {{input}} 来定义表单字段。
最后，我们使用 {{#multi-step-buttons}} 来添加两个按钮：上一步和下一步。这些按钮将会控制表单下一步和上一步的跳转。
第二步，定义控制器文件
我们还需要定义控制器文件，以便在模板文件中使用。在控制器文件中，我们需要定义字段，这些字段将会储存用户填写的信息。在 ember 中，我们定义控制器通常使用 Ember Controller(或者 Ember Object)。
比如，我们可以定义如下的控制器文件：
import Ember from 'ember';
export default Ember.Controller.extend({
firstName: '',
lastName: '',
address: '',
phoneNumber: ''
});在上面的例子中，我们使用 exports 将控制器暴露出来，使用 import 在模板中引入该文件。
第三步，使用模板文件
我们需要在我们的应用程序中使用模板文件来显示表单。我们可以在应用程序中通过路由来使用模板文件。在我们的应用中，我们需要定义一个路由，指定该路由会显示 multi-step 文件。在本例中，我们可以定义如下路由：
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('signup')
}
});在上面的例子中，我们使用该路由来将模板文件添加到应用程序中，使之成为该路由的“模板”。
{{outlet}}如上，我们可以使用 {{outlet}} 嵌入路由的模板。这样，当你访问应用程序时，会自动加载该文件作为您的主页。
至此，我们已经成功使用 ember-multi-step 实现了多步表单，现在可以通过打开应用程序，查看表单是否按预期工作。
总结
在本文中，我们简要介绍了 ember-multi-step，这是一个非常有用的 npm 包，可以让我们创建多步表单。我们介绍了如何安装 ember-multi-step，如何定义多步表单的模板，如何定义控制器文件，以及如何在应用程序中使用模板文件。通过这样一个实例，我们理解了 ember-multi-step 的实现原理，为以后的表单处理打下了基础。我们也希望本文给大家带来了一些帮助，可以尽快上手开发前端复杂表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681981e8991b448e43ce