logologo
开始
手册
开发
插件
API
English
简体中文
开始
手册
开发
插件
API
English
简体中文
logologo

简介

什么是 FlowEngine?
FlowEngine 与插件的关系
快速开始
学习路线图

指南

注册 FlowModel
创建 FlowModel
渲染 FlowModel
FlowModel 事件流与配置化
FlowModel 持久化
FlowModel 生命周期
FlowModel 的上下文体系
响应式机制:Observable
FlowModel vs React.Component

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous Page注册 FlowModel
Next Page渲染 FlowModel

#创建 FlowModel

#作为根节点

#构建 FlowModel 实例

在本地构建一个实例

const model = engine.buildModel({
  uid: 'unique1',
  use: 'HelloModel',
});

#保存 FlowModel

构建的实例如果需要持久化时,可以通过 save 方法保存。

await model.save();

#从远程仓库加载 FlowModel

已经保存的 model,可以通过 loadModel 加载,这个方法会加载整个模型树(包括子节点):

await engine.loadModel(uid);

#加载或创建 FlowModel

如果模型存在则加载,不存在则创建并保存。

await engine.loadOrCreateModel({
  uid: 'unique1',
  use: 'HelloModel',
});

#渲染 FlowModel

const model = engine.buildModel({
  uid: 'unique1',
  use: 'HelloModel',
});
const model = await engine.loadModel(uid);
const model = await engine.loadOrCreateModel(options);

<FlowModelRenderer model={model} />

#作为子节点

当你需要在一个模型内部管理多个子组件或模块的属性和行为时,就需要使用 SubModel,例如嵌套布局、条件渲染等场景。

#创建 SubModel

推荐使用 <AddSubModelButton />

可以自动处理子 Model 的添加、绑定、存储等问题,详见 AddSubModelButton 使用说明。

#渲染 SubModel

model.mapSubModels('subKey', (subModel) => {
  return <FlowModelRenderer model={subModel} />;
});

#作为 ForkModel

Fork 通常用于需要在多个位置渲染同一个模型模板(但状态独立)的场景,例如表格中的每一行。

#创建 ForkModel

const fork1 = model.createFork('key1', {});
const fork2 = model.createFork('key2', {});

#渲染 ForkModel

<FlowModelRenderer model={fork1} />
<FlowModelRenderer model={fork2} />