TTML

TTML 是用来编写页面结构用的标签语言。

主要包括下面一些特性：

数据绑定

  1. <!--ttml-->
  2. <view> {{message}} </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     message: 'Hello World!'
  5.   }
  6. })

列表渲染

  1. <!--ttml-->
  2. <view tt:for="{{array}}"> {{item}} </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     array: [1, 2, 3, 4, 5]
  5.   }
  6. })

条件渲染

  1. <!--ttml-->
  2. <view tt:if="{{view == 'A'}}"> A </view>
  3. <view tt:elif="{{view == 'B'}}"> B </view>
  4. <view tt:else="{{view == 'C'}}"> C </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     view: 'A'
  5.   }
  6. })

模板

  1. <!--ttml-->
  2. <template name="staffName">
  3.   <view>
  4.     FirstName: {{firstName}}, LastName: {{lastName}}
  5.   </view>
  6. </template>
  8. <template is="staffName" data="{{...staffA}}"></template>
  9. <template is="staffName" data="{{...staffB}}"></template>
  10. <template is="staffName" data="{{...staffC}}"></template>
  1. // page.js
  2. Page({
  3.   data: {
  4.     staffA: {firstName: '大林', lastName: '斯'},
  5.     staffB: {firstName: '吉尔', lastName: '丘'},
  6.     staffC: {firstName: '福', lastName: '罗思'}
  7.   }
  8. })

事件

  1. <!--ttml-->
  2. <view bindtap="add"> {{count}} </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     count: 1
  5.   },
  6.   add: function(e) {
  7.     this.setData({
  8.       count: this.data.count + 1
  9.     })
  10.   }
  11. })

原文: https://developer.toutiao.com/docs/framework/ttml.html