1. 程式人生 > >微信小程式 雙向資料繫結

微信小程式 雙向資料繫結

在微信小程式中,js的資料和前端顯示的資料是單資料流,也就是說,js裡邊的資料變了,前端能立刻顯示;但如果前端資料變了,js不能改變。

舉個例子
<view class="weui-cell weui-cell_input">
   <view class="weui-cell__hd">
     <view class="weui-label">
       <text space="ensp">接 待 人</text>
     </view>
   </view>
   <view
class="weui-cell__bd">
<input class="weui-input" name="manager" value="{{info.manager}}" /> </view> </view>

在這裡,當用戶輸入文字的時候,value的是使用者輸入的值,但是js裡面 info.manager的值沒有變;反之,使用者在js裡改變info.manager時,前端能改變。

如果實現雙向資料流,該怎麼處理,不想一個個的獲取,想在使用者輸入的時候直接賦值到js。

簡單實現:

<view class="weui-cell weui-cell_input"
>
<view class="weui-cell__hd"> <view class="weui-label"> <text space="ensp">接 待 人</text> </view> </view> <view class="weui-cell__bd"> <input class="weui-input" name="manager" bindinput="inputedit" data-obj="info" data-item="manager"
value="{{info.manager}}" />
</view> </view>
inputedit: function (e) {
    // 1. input 和 info 雙向資料繫結
    let dataset = e.currentTarget.dataset;
    //data-開頭的是自定義屬性,可以通過dataset獲取到,dataset是一個json物件,有obj和item屬性,可以通過這兩個實現雙向資料繫結,通過更改這兩個值,對不同name的變數賦值
    let value = e.detail.value;
    this.data[dataset.obj][dataset.item] = value;
    this.setData({
      obj: this.data[dataset.obj]
    });
  }