# @api-components/api-view-model-transformer 中文文档

规范地址：https://npmcn.com/package/%40api-components/api-view-model-transformer/

版本：4\.2\.2
npm 元数据更新时间：2026-04-07T19:29:52.402Z
中文译文更新时间：2026-11-06T13:33:58.232Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40api-components/api-view-model-transformer
原文对照：https://npmcn.com/package/%40api-components/api-view-model-transformer/?lang=original
项目主页：https://github.com/advanced-rest-client/api-view-model-tranformer#readme
源码仓库：https://github.com/advanced-rest-client/api-view-model-tranformer

弃用说明：Use @api-components/api-forms instead

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：181 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：4 个
- 首次发布：2018-05-18T22:11:49.729Z
- 最新版本发布：2020-11-11T01:01:09.702Z
- 近 30 天下载量：3120（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 0 个）

## 中文简介

AMF模型变压器为API组件中使用的形式视图模型.

## 安装

```sh
npm install @api-components/api-view-model-transformer
```

也可以使用：`pnpm add @api-components/api-view-model-transformer`、`yarn add @api-components/api-view-model-transformer`、`bun add @api-components/api-view-model-transformer`

## README

[![Published on NPM](https://img.shields.io/npm/v/@api-components/api-view-model-transformer.svg)](https://www.npmjs.com/package/@api-components/api-view-model-transformer)

[![Build Status](https://travis-ci.com/advanced-rest-client/api-view-model-transformer.svg)](https://travis-ci.org/advanced-rest-client/api-view-model-transformer)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/advanced-rest-client/api-view-model-transformer)

# ApiView 模式

一个将AMF的ld-json模型转化为形式视图模型的库. 窗体视图用于为嵌入在api-request-editor元素中的编辑器提供动力. 该模型应用于构建一个格式视图,用于请求参数如头,查询参数,uri参数或正文等.

## 版本兼容性

此版本仅与AMF模式版本2(AMF parser QQ 4.0.0)相通. 用于与上一个模型版本的兼容性 `3.x.x` 版本的组件.

## 折旧通知

这个 `api-view-model-transformer` 自定义元素在 `AmfHelperMixin` 需要一个 `HTMLElement` 作为基础课。 既然情况并非如此,这个要素正在被改变 进入JS图书馆。 自定义元素仅具有之前可访问的公共属性. 下一次主要发布时, 自定义元素将被删除 . 请用 `ApiViewModel` 类而不是元素.

## 使用量

### 安装

```sh
npm install --save @api-components/api-view-model-transformer
```

### 示例

```javascript
import { ApiViewModel } from '@api-components/api-view-model-transformer';
const amf = getAmfFromRamlOrOas();
const headers = extractHeadersForMethod(amf); // or other types.
const worker = new ApiViewModel();
const viewModel = worker.computeViewModel(headers);
```

此示例使用 `getAmfFromRamlOrOas()` 函数,用于执行获取AMF json/ld数据的逻辑。 它可以用AMF 解析器存储在文件中或解析. 这个 `extractHeadersForMethod()` 代表用于提取要转换的属性的逻辑。 它可以是头,查询参数或体型.

## 折旧实例

```html
<api-view-model-transformer></api-view-model-transformer>
<script>
const amfModel = getAmfFromRamlOrOas();
const processor = document.querySelector('api-view-model-transformer');
processor.amf = amfModel;
processor.shape = extractHeadersForMethod(amfModel);
processor.addEventListener('view-model-changed', (e) => {
 console.log(e.detail.value);
});
</script>
```

## ld+json 语境

JSON 计划可能包含 `@context` 属性。 它可以通过将命名空间代号替换为定义于 `@context` 关键词 要正确计算AMF值,必须设置完整的AMF模型 `amf` 属性.

## 发展

```sh
git clone https://github.com/advanced-rest-client/api-view-model-transformer
cd api-view-model-transformer
npm install
```

### 本地运行演示

```sh
npm start
```

### 运行测试

```sh
npm test
```

## 常见问题

### @api-components/api-view-model-transformer 是什么？

AMF模型变压器为API组件中使用的形式视图模型\.注意：该包已被作者标记为弃用——Use @api-components/api-forms instead

### 如何安装 @api-components/api-view-model-transformer？

在项目目录运行 npm install @api-components/api-view-model-transformer，或使用 pnpm add / yarn add / bun add。

### @api-components/api-view-model-transformer 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/api-components\_\_api-view-model-transformer 是否存在。

### @api-components/api-view-model-transformer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @api-components/api-view-model-transformer 可以商用吗？

@api-components/api-view-model-transformer 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @api-components/api-view-model-transformer 的下载量有多少？

根据 npm 官方下载统计，@api-components/api-view-model-transformer 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,120 次，日均约 104 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @api-components/api-view-model-transformer 还在维护吗？

最新版本 4\.2\.2 发布于 2020/11/11（5 年前）；至今共发布 20 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/05/19。作者已将其标记为弃用，新项目建议寻找替代方案。