微信小程序實現部分雙向數據綁定（為input、picker、textarea編寫統一的更新數據邏輯）

wepy開發小程序

以input為例，微信小程序沒有數據雙向綁定，input要顯示綁定的數據即value等於一個綁定的量

<input type="text" value="{{inputdata}}"/>

data = {

　　inputdata: '數據'

}

當在input中改變內容后，inputdata並不會變化，需要綁定事件，通過編寫程序來改變inputdata。

但開發過程中如果input等表單控件很多的話，這些事件一個一個寫就會感到很麻煩，所以編寫一個程序來實現數據的綁定是大家都想實現的。

我實現的方法如下：

<input type="text" bindinput="inputeidt" data-obj="obj" data-item="item" value="{{obj.item}}"/>

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

<input type="text"  wx:if="{{item.type === 'input'}}" bindinput="inputeidt" data-obj="saveinfo" data-item="{{item.name}}" value="{{item.value}}"/>

這樣就實現了。上面的js要寫在onLoad中，如果在data中寫的話，會發生問題，當頁面第二次打開時，saveinfo便不再是代理，而變成了{}，結果便不能正常改變數據的值。

使用bindinput而不用bindblur是因為點擊其他元素后，input失去焦點，是會先觸發點擊事件，才觸發失去焦點事件。這樣點擊保存按鈕，就會先保存，后更改數據，使得數據沒有更改，所以使用bindinput，但使用bindinput可能性能不好。

使用bindblur的話，點擊保存按鈕保存數據的事件中一定要寫一個延時來解決，setTimeout(() => {//上傳保存邏輯}, 100)

具體行為可以查看我寫的小程序：約會寶的個人信息填寫頁面