微信小程序没有数据双向绑定一说

人总是会犯经验主义的错误。由于工作中使用 angularjs 框架，习惯了使用框架的数据双向绑定机制，那叫一个爽，就很喜欢看到 “{{}}” ，以至于一看到使用双花括号包裹变量，就认为具备了数据双向绑定能力。

然而在微信小程序中，同样的符号，在页面上同样的使用，可偏偏是单向的。试用双花括号能将 js 中（即逻辑层）定义的数据渲染到 wxml 中（即视图层），可是当视图层的组件值发生改变时，逻辑层是不能通过该变量直接获取最新值的。比如：

--- wxml 文件代码段 ---

<view>
    <text class="">姓名： </text>
    <input class='form-inline' type="text" placeholder="姓名" value='{{userName}}'/>    
</view>

--- js 文件中代码段段 ---

Page({
    data: {
        userName: '张三'
    }
})

--- 页面渲染结果 ---

当这个“张三”所属的 input 组件的值发生改变时，对应的 js 中的变量 data 并没有改变。也就是不能通过 this.data.userName 获取该组件的最新值。

那么怎么获取呢？

查看 API 文档就发现，状态可以发生改变的组件都会有一些以 “bind” 单词打头的属性，比如 “bindinput”、“bindblur” 等，这些属性绑定一个方法，方法的参数获取一个对象 event 。当组件的值发生改变时，方法被触发，方法内使用 event.detail.value 就可以获取组件的最新值。比如：

--- wxml 文件代码段 ---

<view>
    <text class="">姓名： </text>
    <input class='form-inline' type="text" placeholder="姓名" bindinput='userNameFn'/>    
</view>

--- js 文件中代码段段 ---

Page({
    data: {
        userName: '张三'
    },
    userNameFn: function (event) {
        this.setData({
            userName: event.detail.value
        })
    }
})

这样相当于开发人员手动写了一个方法监视组件值的变化，并实时将最新值赋值给该变量。值得注意的是，有一些组件状态变化后，event.detail.value 不是字符串，而是数组，比如 checkbox-group 组件，该值就是有被选中的 checkbox 的 value 值组成的数组。