TTML-数据绑定

基础绑定

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

Page({
  data: {
    message: "Hello World!"
  }
});

属性绑定（需要在双引号之内）

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

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

指令属性(控制渲染逻辑)

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

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

原生属性（需要在双引号之内）

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

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

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

数运算

<view> {{a + b}} {{c}} ! </view>
<!-- 结果是3 hello ! -->

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

字符串运算

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

Page({
  data: {
    name: "world"
  }
});

渲染对象属性

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

Page({
  data: {
    object: {
      key: "Hello "
    },
    array: ["World"]
  }
});

逻辑控制

<view tt:if="{{length > 1}}"> </view>

混合渲染

支持在 ttml 里面使用变量构建新结构。

数组

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

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

对象

可以在 template 上定义 data 时使用

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

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

⚠️ 注意现在只支持在 template 上定义对象，在其它标签上这么写会报错

也支持使用扩展运算符 ... 将对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
<!-- template到的data是： {a: 1, b: 2, c: 3, d: 4, e: 5} -->

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

常见语法错误

以下表达式都不支持，写了之后会导致程序编译失败

<!-- 带有括号和函数调用 -->
<view>{{ (1) }}</view>
<view>{{ foo() }}</view>
<view>{{ a: function () {} }}</view>
<view tt:if="{{ a.indexOf('flag') > 2 }}"></view>