字节跳动小程序开发框架 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
  }
})

WARNING
现在只支持在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>