TTML-列表渲染
收藏
我的收藏

tt:for

在组件上使用 tt:for 属性可以绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

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

<!-- index.ttml -->
<view tt:for="{{array}}"> {{index}}: {{item.message}} </view>

// index.js
Page({
  data: {
    array: [
      {
        message: "foo",
      },
      {
        message: "bar",
      },
    ],
  },
});

•

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

•

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

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

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

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

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

tt:key 如何指定：

•

字符串：代表 item 的某个字段，比如tt:key="unique"，那么指定 item 的 unique 字段为 key。

•

*this：代表 item 本身，比如tt:key="*this"，那么就是用 item 本身（字符串）作为 key。

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