数据绑定

数据绑定是通过获取页面数据,并以一定的绑定模式,将数据绑定至元素,以达到特定的效果。

数据绑定的实质:数据通过逻辑驱动元素发生变化,这个逻辑就是数据绑定。

获取数据的方法:通过后端接口获取或绑定变量初始化。

:使用数据绑定的页面在打开页面显示数据时,会有一个可见的延迟。

1. 进入数据绑定

右键点击元素→逻辑→数据绑定。

2. 界面介绍

(1)数据绑定区:选择元素并设置绑定模式和绑定参数。

绑定模式:设置数据绑定的绑定模式,控制绑定的效果。

绑定参数:对应绑定模式的参数设置,绑定参数就是一个变量的名称,变量命名只能是字母、数字、并需要全小写。只要符合命名规范,变量可以取任意命名。

设置绑定模式和绑定参数后,点击增加绑定,才会为元素添加数据绑定。

(2)初始化变量区:提供初始化数据。

绑定变量初始化:给页面提供初始数据。初始化全局变量中的任意变量,与上面使用的任意全局变量完全无关。变量全局有效,因此变量只需要在任意一个地方初始化即可。绑定变量动态化时,要求整体动态化。点击查看绑定变量初始化中高级编辑操作详情。

3. 数据绑定模式
  1. 数据绑定针对的是元素的各个剖面,按照其剖面来源,分为了如下三类绑定模式:
    • 类似于样式的划分,按照可显示特性,文本内容,属性(CSS属性,ID等等),输入、各类事件(支持事件逻辑中的全部事件)等与视觉相关的绑定模式。
    • 为了支持逻辑,支持了数组、否定以及条件绑定。
    • 剖面扩展,WIDE中使用绑定作为对元素增加额外特性的方式。此类绑定模式,在一个元素上添加时,自动为元素支持某些特性,例如就地编辑绑定,为绑定的元素添加了可就地编辑特性。
  2.  “绑定参数”中写“变量名”的都不仅限于使用变量名,可以直接使用表达式(eg: vmvar() > 2)), 因此,绑定参数与复合信息本质并无区别,复合信息只是为了书写方便而存在的——概念上就是绑定(不过条件比较复杂,单独书写而已)。注意:表达式中可以引用任意的绑定变量,但是变量名右方必须使用括号()。

 

绑定模式功能适用场景适用元素绑定参数
可见性绑定将是否可见的数据绑定至元素需要显示或不显示的元素所有元素变量名
 文本内容绑定将文本内容的数据绑定至元素用户名、商品名、商品价格等可含有文本内容的元素变量名
html内容绑定将html内容的数据绑定至元素链接可含有html内容的元素变量名
css类绑定将css类的数据绑定至元素改变css类所有元素变量名
css样式绑定将css样式的数据绑定至元素改变css样式所有元素{"css样式名":变量名}
属性绑定将属性的数据绑定至元素设置元素属性所有元素{"属性名":变量名}
数组绑定将数组的数据绑定至元素需要循环、重复的内容,如列表、商品目录可以写入子元素的所有元素变量名
条件判断绑定如果真,则发生某事件判断条件所有元素变量名
否定条件判断绑定如果假,则发生某事件判断条件所有元素变量名
就地编辑绑定可以在页面修改被绑定元素显示的内容修改元素显示内容所有元素变量名
就地编辑属性功能开发中 所有元素变量名
表单元素启用绑定状态控制表单元素是否可用按钮是否启用表单元素变量名
表单元素禁用绑定状态控制表单元素是否禁用按钮是否禁用表单元素变量名
表单元素值绑定给表单添加初始值脱离输入后改变元素值,下拉菜单中设置表单元素值表单元素变量名
文本输入值绑定文本框的值绑定和修改即时修改元素文本内容单行文本、多行文本变量名
多选框勾选状态绑定确定多选框选项是否选中多选框的选中状态多选框元素变量名
数组绑定多选框选项名将多选框选项名绑定为数组内容下来菜单的联动多选框元素"变量名"
数组绑定多选框选项值将多选框选项值绑定为数组内容下来菜单的联动多选框元素"变量名"
数组绑定多选框选项将多选框选项绑定为数组内容下来菜单的联动多选框元素变量名
数组绑定多选框选中选项设置默认选中项下来菜单的联动多选框元素变量名
确保唯一name  所有元素变量名