双向绑定

@model

Two-way binding

视图层可以影响到逻辑层

逻辑层也可以影响到视图层

视图层逻辑层

多用于表单元素

为 value 添加 model 修饰符即可实现双向数据绑定

可以绑定的熟悉有：value、checked、selected等

省略了触发事件，如bindchange或bindinput

只能简单属性绑定 - 单一字段

借助调试器的AppData查看绑定情况

数据提交 - 使用双向数据绑定和自定义事件实现；提交了绑定的数据，相当于提交了表单数据

抛弃传统的表单结构，使用普通结构，按钮也不需要指定表单类型

<view class="form">
    <input type="text" name='uname' model:value="{{user.uname}}" />
    <button bind:tap="submitModel">submit</button>
</view>

数据 - 通常以对象的形式出现，便于提交

data: {
    user:{
        uname:'gl'
    }
}

自定义事件 - 提交时，将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>

选择绑定

绑定的是选中状态 checked

<radio>

<radio-group name="ugender">
    <radio value="male" color="#ff4400" model:checked="{{user.ugender=='male'}}" />male
    <radio value="female" color="#ff4400" model:checked="{{user.ugender=='female'}}"/>female
</radio-group>

<checkbox>

<switch>