数据绑定

MCML 中的动态数据均来自对应 Page 或 Component 的 data 字段。

注意：

表达式使用 javascript 环境计算，因此支持 js 中的大部分函数。
建议在 Page 或 Component data 的字段中定义使用到的字段默认值，否则部分表达式会因 undefined 导致计算失败，影响界面展示。

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于以下:

页面内容

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

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

组件属性

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

Page({
  data: {
    id: 'id_0'
  }
})

Boolean

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

注意：不要直接写 disabled="false"，其计算结果是字符串"false"，转成 boolean 类型后代表真值。

三元运算

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

算数运算

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

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

逻辑运算

<view mc:if="{{age > 3}}"> </view>

字符串运算

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

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

数据路径运算

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

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

数组

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

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

对象

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

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

results matching ""