微信小程序实现部分双向数据绑定（为input、picker、textarea编写统一的更新数据逻辑）

wepy开发小程序

以input为例，微信小程序没有数据双向绑定，input要显示绑定的数据即value等于一个绑定的量

data = {

　　inputdata: '数据'

}

当在input中改变内容后，inputdata并不会变化，需要绑定事件，通过编写程序来改变inputdata。

但开发过程中如果input等表单控件很多的话，这些事件一个一个写就会感到很麻烦，所以编写一个程序来实现数据的绑定是大家都想实现的。

我实现的方法如下：

inputeidt: function (e) {
  let dataset = e.currentTarget.dataset
  this[dataset.obj][dataset.item] = e.detail.value
}

这样当input中输入内容时，数据也会发生改变。

 

这时虽然能实现数据随着视图变化，但对于数据的结构过于局限，只能是obj：{item： ‘’} 这样的，如果是这样的：

moreinfo: {
  title: '详细信息',
  get: 'findDetailsByUserId',
  save: 'saveDetails',
  item: {
    name: {
      name: 'name',
      title: '姓名',
      type: 'input',
      value: '',
      placeholder: '请填写',
      required: true
    },
    sex: {
      name: 'sex',
      title: '性别',
      type: 'picker',
      value: '',
      placeholder: '请选择',
      required: true,
      range: [
        {
          id: 1,
          name: '男'
        },
        {
          id: 2,
          name: '女'
        }
      ]
    }
  }
}
绑定moreinfo.item.name.value就不行了，

我在解决时用了ES6的代理（写在onLoad中）

let self = this

self.saveinfo = new Proxy({}, {

  set: function (target, key, value, receiver) {
// 给saveinfo中属性赋值前，可以令程序执行其他功能
    self.moreinfo.item[key].value = value

    return Reflect.set(target, key, value, receiver)
  }
})

项目中input是遍历出来的，遍历moreinfo.item

这样就实现了。上面的js要写在onLoad中，如果在data中写的话，会发生问题，当页面第二次打开时，saveinfo便不再是代理，而变成了{}，结果便不能正常改变数据的值。

使用bindinput而不用bindblur是因为点击其他元素后，input失去焦点，是会先触发点击事件，才触发失去焦点事件。这样点击保存按钮，就会先保存，后更改数据，使得数据没有更改，所以使用bindinput，但使用bindinput可能性能不好。

使用bindblur的话，点击保存按钮保存数据的事件中一定要写一个延时来解决，setTimeout(() => {//上传保存逻辑}, 100)

具体行为可以查看我写的小程序：约会宝的个人信息填写页面