前言
使用 JSON API 规范开发后端接口的越来越多，这也引发了前端框架对于 JSON API 的支持和需求。Ember.js 作为一个非常注重标准和约定的框架，自然也提供了一批支持 JSON API 的插件和工具。
其中，ember-jsonapi-resources-form 是一个非常实用的插件，它提供了对于 JSON API 规范中各种不同类型的数据表单生成和验证的支持。同时，它还可以帮助我们更快地编写 JSON API 规范的客户端请求和响应代码。本文将详细介绍如何使用 ember-jsonapi-resources-form。
安装和基本配置
- 安装
使用 npm 安装：
npm install ember-jsonapi-resources-form --save-dev
- 配置
插件默认需要使用 Ember.js 自带的 Ember Data 插件，因此需要在 ember-cli-build.js 文件中添加依赖项：
-- -------------------- ---- -------
-- ------------------
----- --- - --- ------------------ -
-- ----- --------
-- --- --- ------------
------------------ -
-------- --------
-
---如果我们的项目依赖了 Bootstrap 或其他 UI 框架，我们还需要额外安装对应的样式和组件。
使用
- 数据模型
ember-jsonapi-resources-form 要求我们在数据模型中显式地定义每个数据字段的类型，例如字符串、整数、日期、枚举等等。我们需要在 app/models 目录下定义一个新的数据模型，例如 user.js：
-- -------------------- ---- ------- -- ------------------ ------ ------ - ---- - ---- -------------------- ------ ------- ----- --------- ------- ----- - --------------- ----- --------------- ------ ------------- --------- --------------- ------- -
- 表单组件
接下来，我们需要为我们的数据模型编写一个表单组件。在 app/components 目录下创建一个新组件 user-form.js，代码如下：
-- -------------------- ---- -------
-- ---------------------------
------ --------- ---- ---------------------
------ - ------- - ---- --------------------
------ - ---------- ---------------- - ---- -----------------------
------ ----------- ---- -------------------------------------------------------
----- ----------- - ------------------
----- --------------------- ------
------ -
--------------------- ------
------------------- -
----- -------
--
--
--------- -
--------------------- ------
----------------- -
---------- -----
--
--
------- --------------------- -----
---
------ ------- ----- ----------------- ------- --------- -
-------- ----------- - ------------
-------- ------ - -
-
----- -------
----- -------
------ ----
--
-
----- --------
----- --------
------ ----
--
-
----- -------
----- -----------
------ ----
--
-
----- ---------
----- ---------
------ -----
-------- -
- ------ ------- ------ --- --
- ------ --------- ------ --- -
-
-
--
-------- ----- - ----------------
-------- ------ - -----------------
-------- ------------- - ------------------------
-------- --------- - --------------------
--- ---------------- -
------ -
------- ------------
------ -----------
------------ -----------------
------- ------------
-------------- -------------------
---------- --------------
--
-
-表单组件中定义了数据模型的所有字段的显示名称和数据类型，并与 ember-cp-validations 集成，支持表单验证。
- 引用表单组件
我们可以将表单组件 user-form 引用到其他组件或页面中，例如在 app/templates/components/user-edit.hbs 文件中：
<UserForm
@model={{@model}}
@action={{@action}}
@submitCaption='保存'
@isLoading={{this.isLoading}}
/>在我们的后端 API 支持 JSON API 规范的情况下，我们可以通过简单地设置 @model 属性来使用表单组件，不需要编写任何客户端请求和响应代码。表单数据提交成功后，插件会自动更新 @model 属性，并触发 @action 方法，我们只需要在该方法中编写数据的保存逻辑即可。
至此，我们基于 ember-jsonapi-resources-form 完成了一个数据模型的快速表单开发，同时表单验证规则与后端 API 规范保持一致，大大提高了我们的开发效率。
总结
ember-jsonapi-resources-form 作为使用 Ember.js 开发 JSON API 服务的重要插件，可以帮助我们快速开发数据模型表单，同时提供基于客户端的数据验证与请求/响应支持。通过了解本文介绍的 API 和使用示例，我们可以更好地掌握和应用它，对于提高我们的项目开发效率和代码质量有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecb81