Dynamic data in FXML comes from the data corresponding to the Page.

1. Simple binding

Data binding wraps variables with double curly braces and can act on:

1.1 Content

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

// page.js
Page({
  data: {
    message: 'Hello World!'
  }
})

1.2 Component properties (required in double quotation marks)

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

// page.js
Page({
  data: {
    id: 0
  }
})

1.3 Control attributes (required in double quotation marks)

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

// page.js
Page({
  data: {
    condition: true
  }
})

1.4 keywords (needed within double quotes)

'true': True of type boolean, representing the truth value.

'false': false of type boolean, representing a false value.

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

Please note

Do not write 'checked="false"' directly, the result is a string that represents the true value after being converted to the boolean type.

2. operation

Simple operations can be performed within '{{}}', and the following methods are supported:

2.1 Ternary operations

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

2.2 Arithmetic operations

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

// page.js
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

The content in view is '3 + 3 + d'.

2.3 Logical judgment

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

2.4 String operations

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

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

2.5 Data path operations

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

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

3. combination

It can also be combined directly within Mustache to form new objects or arrays.

3.1 Arrays

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

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

The final combination is the array '[0, 1, 2, 3, 4]'.

3.2 objects

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

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

The final composite 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 combination of objects is '{a: 1, b: 2, c: 3, d: 4, e: 5}'.

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

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

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

The final composite is '{foo: 'my-foo', bar:'my-bar'}'.

Please note

The above methods can be combined at will, but if there is a case where the variable names are the same, the back side will overwrite the front, 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 combination of objects is {a: 5, b: 3, c: 6}.

Please note

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

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

Equivalent to

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