TTML-列表渲染

我们经常需要渲染列表，这个时候我们可以使用 tt:for;

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item;

  1. <!-- index.ttml -->
  2. <view tt:for="{{array}}">
  3.   {{index}}: {{item.message}}
  4. </view>
  1. // index.js
  2. Page({
  3.   data: {
  4.     array: [{
  5.       message: 'foo',
  6.     }, {
  7.       message: 'bar'
  8.     }]
  9.   }
  10. })

使用 tt:for-item 可以指定数组当前元素的变量名，

使用 tt:for-index 可以指定数组当前下标的变量名：

  1. <view tt:for="{{array}}" tt:for-index="idx" tt:for-item="itemName">
  2.   {{idx}}: {{itemName.message}}
  3. </view>

block tt:for

可以将 tt:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

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

tt:key

当列表内容变化时，某些元素会被重新渲染而失去之前的UI状态，如果希望前后保持相同的状态，可以使用tt:key来指定列表中项目的唯一标识，这个可以类比React或者Vue中列表渲染的key。

tt:key如何指定：

  • 字符串，代表item的某个字段，比如tt:key="unique"，那么指定item的unique字段为key
  • this，代表item本身，比如tt:key="this"，那么就是用item本身（字符串）作为key

WARNING

不要通过数据绑定的方式指定key，比如tt:key="{ { unique } }"，这样会把花括号也认为是字段名的一部分，从而访问item['{ { unique } }']

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