微信小程式 雙向資料繫結
阿新 • • 發佈:2018-12-29
在微信小程式中,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]
});
}