字節(jié)跳動(dòng)小程序開發(fā)框架 TTML-數(shù)據(jù)綁定

基礎(chǔ)綁定

<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}}" />

運(yùn)算

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

三元運(yùn)算

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

數(shù)運(yùn)算

<view> {{a + b}} {{c}} ! </view>
<!-- 結(jié)果是3 hello ! -->

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

字符串運(yùn)算

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

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

渲染對(duì)象屬性

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

對(duì)象

可以在template上定義data時(shí)使用

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

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

WARNING
現(xiàn)在只支持在template上定義對(duì)象，在其它標(biāo)簽上這么寫會(huì)報(bào)錯(cuò)

也支持使用擴(kuò)展運(yùn)算符 ... 將對(duì)象展開

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

常見語法錯(cuò)誤

以下表達(dá)式都不支持，寫了之后會(huì)導(dǎo)致程序編譯失敗

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