Data Binding

The dynamic data in WXML all comes from the data of the corresponding Page.

Simple binding

Data binding uses Mustache syntax (double curly braces) to wrap variables and can be used for:

Content

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

Component attributes (need to be in double quotes)

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

Control attributes (need to be in double quotes)

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

Keywords (need to be in double quotes)

true：True of boolean type represents true value.

false: False of boolean type represents false value.

<checkbox checked="{{false}}"> </checkbox>

TIP

Do not write checked='false' directly, the result of calculation is a string, which represents true value after conversion to boolean type.

Operation

You can perform simple operations within the curly brackets. The following methods are supported:

Ternary operation:

<view hidden="{{flag ? true : false}}"> Hidden </view>

Arithmetic operation:

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

The content in view is 3 + 3 + d.

Logic judgment

<view wx:if="{{length > 5}}"> </view>

String operation

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

Data path operation

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

Combination

You can also combine directly in Mustache to form a new object or array.

Array

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
  data: {
    zero: 0
  }
})

The final combined object is {a: 1, b: 2, c: 3, d: 4, e: 5}.

Object

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

The final combined object is {for: 1, bar: 2}

You can also use the extension operator... to expand an object

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

The final combined object is {a: 1, b: 2, c: 3, d: 4, e: 5}.

If the key and value of an object are the same, they can also be expressed indirectly.

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

The resulting object is {foo: 'my-foo', bar: 'my-bar'}.

The above methods can be combined at will, but if there are identical variable names, the latter will overwrite the former, such as:

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

The final combined object is {a: 5, b: 3, c: 6}.

TIP

If there is a space between the curly braces and the quotation marks, it will eventually be parsed into a string.

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

This is equivalent to

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

TIP

If there is a space between the curly braces and the quotation marks, it will eventually be parsed into a string.

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

This is equivalent to

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>