Skip to main content

数据绑定



数据绑定功能用于给页面中的节点设置数据来源,其入口位于 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 属性字段绑定结束。