使用setData函数来做数据绑定,这种方法可以理解为"数据更新”。setData方法位于Page对象的原型链上:Page.prototype.setData。大多数情况下,我们使用this.setData的方式来调用这个方法。setData的参数接受一个对象,以key和Value的形式将this.data中的key对应的值设置成value。在post页面中新增一个onLoad函数,并在其中执行setData,更改后的代码如下:

运行后我们发现,文章的标题由data里锁着的title:“小时候的冰棍儿”,被更改成了“一根雪糕的经济学原理”,但其他的数据并没有更变。原因在与我们使用this.setData只更新了title这一个数据,并未改变其他诸如date、avatar、content等数据。此外,当执行了代码后,此时this.data.title的值将是“一根雪糕的经济学原理”,而不再是“小时候的冰棍儿”,因为this.setData的执行也会改变this.data里的值。这就是setData的基本用法。此外,setData参数中的key是非常灵活的,来看看key可能出现的形式。修改代码中的onLoad方法如下:

用this.setData所绑定或者更新的数据,并不要求在this.data中已预先定义。看看下面的例子,将post.js文件中的代码改为如下代码所示。

上述代码中,去掉了this.data中的初始化数据,转而直接使用this.setData进行数据更新,从而实现数据绑定,这种方法也是可行的。但这时项目并不能正常运行,UI上文章编程了空白,且没有任何的错误提示。原因在于,数据绑定的数据结构变了,wxml里的{{}}也需要做相应的改变。借助【AppData】面板来看一下啊现在的数据绑定情况,如图所示。

很明显,这个数据结构和之前的是不一样的。所有的属性都被postData对象包裹了起来,因为我们在this.setData的时候指定的key是postData,value是文章的数据。所以,wxml里的{{}}需要如下这么改:

只需要在每个{{}}里加入postData即可。比如{{title}}应当改为{{postData.title}}。小程序中AppData面板是最好的调试工具。