- Two-way binding
- 视图层可以影响到逻辑层
- 逻辑层也可以影响到视图层
- 视图层 逻辑层
- 多用于表单元素
- 为 value 添加 model 修饰符即可实现双向数据绑定
- 可以绑定的熟悉有：value、checked、selected 等
- 省略了触发事件，如 bindchange 或 bindinput
- 只能简单属性绑定 - 单一字段
- 借助调试器的 AppData 查看绑定情况
[] 数据提交 - 使用双向数据绑定和自定义事件实现；提交了绑定的数据，相当于提交了表单数据
data: {
user:{
uname:'gl'
}
}
调整结构：抛弃传统的表单结构，使用普通结构，按钮也不需要指定表单类型
<view class="form">
<input type="text" name='uname' model:value="{{user.uname}}" />
<button bind:tap="submitModel">submit</button>
</view>
自定义事件：提交时，将 data 中整个 user 对象提交给服务器端
submitModel() {
console.log(this.data.user);
}
. 绑定的是元素的值 value
<input>
data: {
msg: 'hi',
obj:{
id: '20201001'
name:'hi,there.'
}
}
普通方式实现双向绑定单一属性 msg - 利用事件bindinput修改数据
<view>{{msg}}</view>
<input type="text" value='{{msg}}' bindinput="ipt"/>
ipt(e) {
console.log(e.detail.value);
this.setData({
msg:e.detail.value
})
}
model方式实现双向绑定 - 简单粗暴；省略了bindinput事件
<input type="text" model:value='{{msg}}' />
双向绑定复合数据 obj.name
<input type="text" model:value='{{obj.name}}' />
失败：仅实现逻辑层到视图层的绑定；Two-way binding does not support complex data paths currently. This two-way binding is
ignored.
调整：还原为普通事件流bindchange
<input type="text" value='{{obj.name}}' bindinput="getName"/>
getName(e) {
this.setData({
'obj.name':e.detail.value
})
}
<textarea>
<picker>
<slider>
<swiper>
- 绑定的是当前swiper-item - current
- 拖动或设置为自动播放，查看绑定情况
cur:1
<view>{{cur}}</view>
<swiper model:current="{{cur}}">
<swiper-item> 11 </swiper-item>
<swiper-item> 22 </swiper-item>
<swiper-item> 33 </swiper-item>
<swiper-item> 44 </swiper-item>
</swiper>
[] 联动导航 - 改进方案
- 滚动视图scroll-view和轮播swiper配合使用
cur: 1
<scroll-view class="wrap" scroll-x scroll-with-animation model:scroll-into-view="id{{cur}}">
<view class="item" wx:for="{{10}}" wx:key="index" id="id{{index}}">{{item}}</view>
</scroll-view>
<swiper class="swiper-wrap" model:current="{{cur}}">
<swiper-item class="swiper-item" wx:for="{{10}}" wx:key="index">
{{item}}
</swiper-item>
</swiper>