数据绑定
数据绑定功能用于给页面中的节点设置数据来源,其入口位于 IDE 主界面顶部的常用操作工具栏,如上图所示。
数据绑定主要完成如下功能:
为节点绑定动态数据字段
只支持绑定 Text 和 Image 字段
支持多级字段绑定,即通过点( . )来连接多级字段名称,例如绑定字段为 client.name
绑定简单属性
默认情况下,用户设计稿生成的页面都不存在绑定字段,此时页面的数据字段是一个空对象,如下图所示:
此时,我们打开数据绑定面板,也可以看到所有的字段都未设置绑定名称:
当我们在数据绑定面板输入简单的属性名称(不采用.进行分隔),点击保存后,此时 IDE 会自动计算我们输入的属性名称和对应的值,并将对应的属性和 value 放到 data 对象的第一级中,效果如下图所示:
绑定多级属性
如果我们需要将节点绑定到 data 对象内部嵌套对象的属性中,此时只需要输入按点( . )分隔的属性名称即可,如下图所示:
List 组件的绑定
除了简单属性绑定功能外,CodeFun 的 IDE 还支持复杂组件的数据对象绑定操作,我们以 List 组件为例来进行说明。
上图是一个带有 List 组件的页面,在默认情况下,所有 List 内部的字段都没有进行绑定,其对应的数据绑定面板、JS 的 data 字段都是空。
为了使 List 绑定数据支持 v-for 循环列表功能,我们需要在配置面板中打开“将 List 标签输出为循环列表 ( v-for / wx:for )”功能,如下图:
开关打开后,我们设置 List 的绑定数据,规则和绑定 Text 以及 Image 节点一样:
至此,List 属性字段绑定结束。