codecamp

微信小程序 简易双向绑定

基础库 2.9.3 开始支持,低版本需做兼容处理

双向绑定语法

在 WXML 中,普通的属性的绑定是单向的。例如:

<input value="{{value}}" />

如果使用 ​this.setData({ value: 'leaf' })​ 来更新 ​value​ ,​this.data.value​ 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变 ​this.data.value​ 。

如果需要在用户输入的同时改变 ​this.data.value​ ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 ​model​: 前缀:

<input model:value="{{value}}" />

这样,如果输入框的值被改变了, ​this.data.value​ 也会同时改变。同时, WXML 中所有绑定了 ​value​ 的位置也会被一同更新, 数据监听器 也会被正常触发。

用于双向绑定的表达式有如下限制:

  1. 只能是一个单一字段的绑定,如
  2. <input model:value="值为 {{value}}" />
    <input model:value="{{ a + b }}" />
    

    都是非法的;

  3. 目前,尚不能 data 路径,如

    <input model:value="{{ a.b }}" />
    

    这样的表达式目前暂不支持。

在自定义组件中传递双向绑定

双向绑定同样可以使用在自定义组件上。如下的自定义组件:

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})
<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

这个自定义组件将自身的 ​myValue​ 属性双向绑定到了组件内输入框的 ​value​ 属性上。这样,如果页面这样使用这个组件:

<custom-component model:my-value="{{pageValue}}" />

当输入框的值变更时,自定义组件的 ​myValue​ 属性会同时变更,这样,页面的 ​this.data.pageValue​ 也会同时变更,页面 WXML 中所有绑定了 ​pageValue​ 的位置也会被一同更新。

在自定义组件中触发双向绑定更新

自定义组件还可以自己触发双向绑定更新,做法就是:使用 setData 设置自身的属性。例如:

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

如果页面这样使用这个组件:

<custom-component model:my-value="{{pageValue}}" />

当组件使用 ​setData​ 更新 ​myValue​ 时,页面的 ​this.data.pageValue​ 也会同时变更,页面 WXML 中所有绑定了 ​pageValue​ 的位置也会被一同更新。


微信小程序 基础组件
微信小程序 性能Trace工具
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

目录结构

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }