
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
4.1.1 数据绑定
钉钉小程序框架的核心是一个响应式的数据绑定系统,逻辑上分为视图层和逻辑层。这两层始终保持同步,只要在逻辑层修改数据,视图层就会进行相应的更新。
示例代码:


在上述示例代码中,框架自动将逻辑层数据中的name与视图层中的name进行了绑定,所以在页面打开时会显示Hello alibaba!。
当用户点击按钮时,视图层会发送changeName的事件给逻辑层,由逻辑层找到对应的事件处理函数。逻辑层执行了setData的操作,将name从alibaba变为dingtalk,因为该数据和视图层已经绑定,所以视图层会自动改变为Hello dingtalk!。
注意
由于框架并不是运行在浏览器中的,因此Web中的一些对象,JavaScript无法使用,如Document、Window等对象。
在逻辑层.js文件中,可以用ES6模块化语法组织代码:
