TTML-列表渲染

我們經(jīng)常需要渲染列表，這個時候我們可以使用 tt:for;

默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item;

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

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

使用 tt:for-item 可以指定數(shù)組當(dāng)前元素的變量名，

使用 tt:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

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

block tt:for

可以將 tt:for 用在<block/>標(biāo)簽上，以渲染一個包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如：

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

tt:key

當(dāng)列表內(nèi)容變化時，某些元素會被重新渲染而失去之前的 UI 狀態(tài)，如果希望前后保持相同的狀態(tài)，可以使用tt:key來指定列表中項(xiàng)目的唯一標(biāo)識，這個可以類比 React 或者 Vue 中列表渲染的 key。

tt:key 如何指定：

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

?? 注意不要通過數(shù)據(jù)綁定的方式指定 key，比如tt:key="{ { unique } }"，這樣會把花括號也認(rèn)為是字段名的一部分，從而訪問item['{ { unique } }']