Form.io 核心数据处理引擎
这个库是Form.io平台背后的核心数据处理引擎. 它是一组异构的API,允许JSON形式和提交定义的复杂管弦(如计算值,有条件隐藏的组件,复杂的逻辑等).
正式文件
最新文件、发布资料和指南一律参考本文中提供的官方表格:
使用量
@formio/core作为 npm 包提供. 您可以使用您选择的软件包管理器安装 :
# npm
npm install --save @formio/core
# yarn
yarn add @formio/core
发展
有效处理表格和提交数据有两个不同的要求:
- (一) JSON表格的形态和数据认识;以及
- 一组处理功能来得到(并偶尔会变异)形成状态.
第一个要求是通过 eachComponentData 财务报告和审定财务报表 eachComponentDataAsync 函数,它跨越每个组成元件JSON,并提供一个调用参数,通过这个参数与元件相互作用,它是相应的提交数据参数.
第二个要求是通过"处理器"(例如. calculate, (中文(简体) ), validate,或 hideChildren),这些职能,经评价后 context,运行、从状态中得出,并偶尔根据内部形式逻辑对形式状态和提交值进行突变,从而形成 scope 对象,包含每个按组件路径键的处理器的结果.
在表格和呈件上运行一套处理器 process 函数的家族形式包括:JSON定义、提交JSON定义和一系列处理器函数作为参数(概括为 context 对象,它传递给每个调用回调处理器函数.
import { processSync } from '@formio/core';
const form = {
display: 'form',
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
input: true,
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
input: true,
},
{
type: 'button',
key: 'submit',
action: 'submit',
label: 'Submit',
},
],
};
const submission = {
data: {
firstName: 'John',
lastName: 'Doe',
},
};
const addExclamationSync = (context) => {
const { component, data, scope, path, value } = context;
if (!scope.addExclamation) scope.addExclamation = {};
let newValue = `${value}!`;
// The scope is a rolling "results" object that tracks which components have been operated on by which processor functions
scope.addExclamation[path] = true;
_.set(data, path, newValue);
return;
};
// The context object is mutated depending on which component is being processed; after `processSync` it will contain the processed components and data
const context = {
components: form.components,
data: submission.data,
processors: [{ processSync: addExclamationSync }],
scope: {},
};
// The `process` family of functions returns the scope object
const resultScope = processSync(context);
console.assert(resultScope['addExclamation']?.firstName === true);
console.assert(resultScope['addExclamation']?.lastName === true);
console.assert(submission.data.firstName === 'John!');
console.assert(submission.data.lastName === 'Doe!');
实验
这个库包含实验代码(发现于 src/experimental 目录或通过导入,例如:. import { Components } from @formio/core/experimental),旨在更新并取代Form.io平台后的核心渲染引擎. 它是一个微小(12k gzipped)的渲染框架,可以渲染出复杂的组件并管理由每个组件所控制的数据模型.
使用量
要使用此实验框架, 您首先需要将父库安装到您的应用程序中 .
# npm
npm install --save @formio/core
# yarn
yarn add @formio/core
接下来,您可以创建如下新组件 .
import { Components } from '@formio/core/experimental';
Components.addComponent({
type: 'h3',
template: (ctx) => `<h3>${ctx.component.header}</h3>`,
});
现在这个组件将使用以下方法来渲染.
const header = Components.createComponent({
type: 'h3',
header: 'This is a test',
});
console.log(header.render()); // Outputs <h3>This is a test</h3>
您也可以通过将以下内容纳入您的网页脚本来使用此库 .
<script src="https://cdn.jsdelivr.net/npm/@formio/base@latest/dist/formio.core.min.js"></script>
在此之后,您可以在您的网站上创建数据表.
FormioCore.render(
document.getElementById('data-table'),
{
type: 'datatable',
key: 'customers',
components: [
{
type: 'datavalue',
key: 'firstName',
label: 'First Name',
},
{
type: 'datavalue',
key: 'lastName',
label: 'First Name',
},
],
},
{},
{
customers: [
{ firstName: 'Joe', lastName: 'Smith' },
{ firstName: 'Sally', lastName: 'Thompson' },
{ firstName: 'Mary', lastName: 'Bono' },
],
},
);