使用 Emberx-form 的指南-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，表单处理是一个非常常见和必须的任务。Emberx-form 是一个基于 Ember.js 的 npm 包，它可以大大简化开发者的表单处理过程和代码量，提高效率。本文将介绍如何使用 Emberx-form 的基础知识、实例代码和一些使用建议。

什么是 Emberx-form

Emberx-form 是一个开源的 npm 包，为开发者提供了一个更好的表单控制方案，同时也提供了一些额外的功能，如自定义验证和集成 Bootstrap 样式。它的优点有以下几点：

快速构建输入表单
简单易用的 API
支持各种验证方式

安装

在开始之前，请确保已安装好 Ember.js，如果没有，请运行以下命令：

npm install -g ember-cli

安装完成后，可通过以下命令安装 Emberx-form：

npm install emberx-form --save

使用方法

在模板文件中引用 <Form>

首先在模板文件中引用 <Form>，如下所示：

{{#form-for model on-submit=(action "submit") as |form|}}
  {{form.field "name"}}
  {{form.field "email" type="email"}}
  {{form.field "password" type="password"  placeholder="Password..."}}
  {{form.submit "Register"}}
{{/form-for}}

此处使用了 form-for 和 form.field 辅助方法，用于在表单中生成字段。其中 model 是你的模型，on-submit 是提交表单后执行的动作。

定义 model

在控制器中，我们需要定义 "model" 属性，并设置属性的默认值。如下所示：

-- -------------------- ---- -------
------ ----- ---- --------

------ ------- -------------------------
  ------ -
    ----- ---
    ------ ---
    --------- --
  --

  -------- -
    -------- -
      ----------------- - ----------------------------
    -
  -
---

在这里我们定义了 model，并设置了 name、email 和 password 的默认值为空字符串。我们还创建了一个动作，当表单被提交时调用。

在路由文件中定义路径

最后，在路由文件中，我们可以定义连接到控制器的路径，如下所示：

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {};
  }
});

这里可以返回任何对象，现在我们返回了一个空对象。

到此为止，我们就配置好了我们的表单。

API

Emberx-form 通过 form-for 组件和 form.field 组件提供了一些可用参数。以下是一些常用 API：

`form-for` 组件

model: 设置表单的模型（默认情况为空对象）
on-submit: 点击提交时发生的动作
on-cancel: 点击取消按钮发生的动作

`form.field` 组件

value: 给字段提供默认值（默认情况下为空字符串）
type: 定义输入框的类型（默认值为 "text"）
placeholder: 输入框中的占位符

自定义验证

除了提供给开发者使用的默认验证方法（例如：需要填写、邮箱、密码强度等）之外，Emberx-form 还支持自定义验证器。例如如下的例子，自定义了一个简单的字符串验证器：

-- -------------------- ---- -------
------ - ---------- ---------------- - ---- -----------------------

------ ------- ------------------
  ---------- --------------------- ------
  --------- --------------------- ------
  --------- -
    --------------------- ------
    ------------------- -
      ---- --
      ---- -
    --
  --
  ------ -
    --------------------- ------
    ------------------- - ----- ------- --
  -
---

使用自定义验证器后，还需要在表单字段中定义验证规则：

{{form.field "last_name" errorClass="has-error" validate=(get model 'validations.attrs.email.validation')}}

验证器的详细定义和使用方法，可以参考 ember-cp-validations。

使用建议

为了使表单更加清晰、易读，我们可以将字段定义到控制器中，然后在模板中进行引用。这样可以更好的防止表单的耦合度过高，以便未来的测试、扩展和维护。
我们可以定义一个名为 ValidationsMixin 的混合组件，在其中定义所有验证器。这样，可以避免在多个控制器中多次定义相同的验证器。
我们可以在每个字段的定义中添加验证器，并设置 disable 属性的值，以防止用户在表单未填完整的情况下提交表单。

实例

以下是一个简单的注册页面，可用作参考：

-- -------------------- ---- -------
----------- ----- ----------------- ----------- -- --------
  ---- ------------
    ---- ------------------
      ---- -------------------
        ------------ ---------- ---------------------- -------------------- -----------------------------------
      ------
    ------
  ------

  ---- ------------
    ---- -----------------
      ---- -------------------
        ------------ ----------- ------------------ ----- --------------------- -----------------------------------
      ------
    ------
    ---- -----------------
      ---- -------------------
        ------------ ---------- ----------------- ----- -------------------- -----------------------------------
      ------
    ------
  ------

  ---- ------------
    ---- ------------------
      ---- -------------------
        ------------ ------- ------------------- ----------------- ------------ -----------------------------------
      ------
    ------
  ------

  ---- ------------
    ---- ------------------
      ---- -------------------
        ------------ ---------- ---------------------- -------------------- --------------- -----------------------------------
      ------
    ------
  ------

  ---- ------------
    ---- ------------------
      ---- -------------------
        ------------ ---------------------- -------------------- --------- -------------------------------- --------------- -----------------------------------
      ------
    ------
  ------

  ---- ------------
    ---- ------------------
      ------------- ---------- ----------------------- ------------- -------------------
    ------
  ------

-------------

总结

Emberx-form 可以大大简化表单处理的代码，为开发者提供了一个良好而强大的解决方案。使用 Emberx-form ，你可以更快、更便捷的开发表单，同时在表单验证、样式和行为方面提供了极大的扩展性。相信在实际开发中，Emberx-form 也会给你提供很好的帮助和支持。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd16

使用 Emberx-form 的指南