![企业数字化转型:钉钉小程序开发权威指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/339/43738339/b_43738339.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
4.1.1 数据绑定
钉钉小程序框架的核心是一个响应式的数据绑定系统,逻辑上分为视图层和逻辑层。这两层始终保持同步,只要在逻辑层修改数据,视图层就会进行相应的更新。
示例代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_38_1.jpg?sign=1739061833-O8hCqEYvFghUaGJKPtb8kIwj8ckYyZZ3-0-b52a1de3a74f54794b45729fc2e6d35d)
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_39_1.jpg?sign=1739061833-UCiRSuqiOVhPpNk87WPPvKb1Lu5nqAqb-0-7b970efb2962daff9658b26214ed1f02)
在上述示例代码中,框架自动将逻辑层数据中的name与视图层中的name进行了绑定,所以在页面打开时会显示Hello alibaba!。
当用户点击按钮时,视图层会发送changeName的事件给逻辑层,由逻辑层找到对应的事件处理函数。逻辑层执行了setData的操作,将name从alibaba变为dingtalk,因为该数据和视图层已经绑定,所以视图层会自动改变为Hello dingtalk!。
注意
由于框架并不是运行在浏览器中的,因此Web中的一些对象,JavaScript无法使用,如Document、Window等对象。
在逻辑层.js文件中,可以用ES6模块化语法组织代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_39_2.jpg?sign=1739061833-N2XlvmBMvc8lEDJYQRkRvvjlqTtguiTu-0-5604393cc0b10561d2d5e34081c2ab0d)