华为云Astro轻应用-标准页面:模型视图

时间:2025-02-12 15:01:02

模型视图

标准页面是通过数据模型驱动的,页面所有的逻辑都是围绕数据模型展开的。在将模型与前台页面组件或者后台逻辑绑定后,开发者只需要关注模型数据的实例化和处理,不需要关注页面的渲染和展示。

在页面底部,单击“模型视图”,即可从“设计视图”切换到“模型视图”,在模型视图下,可以查看、编辑以及管理数据模型,如图6所示。

图6 模型视图

模型定义

标准页面支持表1中四类模型,每类模型都包含参数定义和方法定义。方法是在模型上定义的API,通常会在前端组件关联的事件脚本(例如页面加载事件、鼠标单击事件)中调用这些API,以实现一定的逻辑。

表1 模型说明

模型分类

模型说明

模型参数的定义

模型方法的定义

API调用方法

自定义模型

自定义模型是由开发者自由定义的模型。

参数由开发者自定义,可以添加子节点。

开发者自定义方法。

$model.ref("modelName").actionName();

对象模型

对象模型是直接与Object对象表映射生成的。

系统自动获取Object所有的字段,开发者可以从中选择部分字段作为参数。

平台自动生成查询、保存、删除和统计4个方法。

  • $model.ref("modelName").query(param);
  • $model.ref("modelName").save();
  • $model.ref("modelName").delete();
  • $model.ref("modelName").count();

服务模型

服务模型是与后台服务映射生成的,当前支持与服务编排或Script映射。

参数根据后台服务的入参、出参映射生成为inputParam和outputParam节点。

平台自动生成了run方法 ,用于执行模型关联的服务编排或者Script。

$model.ref("modelName").run();

事件模型

事件模型是与后台事件的字段映射生成的,并且支持websocket刷新模型数据。

参数根据后台事件的字段映射生成。

平台自动生成了run方法 ,用于执行模型关联的服务编排或者Script。

$model.ref("modelName").run();

除了在模型中定义的方法,AstroZero还提供了如下标准API:

  • 获取模型数据:$model.ref("modelName").getData();
  • 设置模型数据:$model.ref("modelName").setData();
  • 设置模型字段值:$model.ref("modelName").setValue(key,value);

模型绑定

模型与前端组件的绑定分为值绑定和属性绑定,绑定会在指定组件上创建双向数据绑定。

  • 典型的值绑定场景有:表单、表格、列表视图对应的model绑定,以及输入框、下拉框等基础组件对应的value绑定,类似Vue的v-model。
  • 典型的属性绑定场景有:下拉框的选项值、步骤条的步骤值等,类似Vue的v-bind。

图7所示的例子中,实现了表格DataGrid组件与值的绑定。

图7 数据绑定
support.huaweicloud.com/bestpractice-astrozero/astrozero_07_1023.html