TTML-數(shù)據(jù)綁定

基礎綁定

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

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

屬性綁定（需要在雙引號之內(nèi)）

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

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

指令屬性(控制渲染邏輯)

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

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

原生屬性（需要在雙引號之內(nèi)）

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

運算

可以在 {{}} 內(nèi)進行簡單的運算，支持的有如下幾種方式：

三元運算

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

數(shù)運算

<view> {{a + b}} {{c}} ! </view>
<!-- 結(jié)果是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 里面使用變量構(gòu)建新結(jié)構(gòu)。

數(shù)組

<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
  }
});

?? 注意現(xiàn)在只支持在 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
    }
  }
});

常見語法錯誤

以下表達式都不支持，寫了之后會導致程序編譯失敗

<!-- 帶有括號和函數(shù)調(diào)用 -->
<view>{{ (1) }}</view>
<view>{{ foo() }}</view>
<view>{{ a: function () {} }}</view>
<view tt:if="{{ a.indexOf('flag') > 2 }}"></view>