Nhảy tới nội dung

Render list

Cập nhật lần cuối vào

tiki:for

Trong một Component, bằng việc sử dụng thuộc tính tiki:for để gán một mảng dữ liệu vào TXML, bạn có thể sử dụng mảng dữ liệu đó để render.

Khi sử dụng tiki:for, mỗi item của mảng có thể truy xuất vào 2 giá trị indexitem.

<view tiki:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [
{
message: 'foo'
},
{
message: 'bar'
}
]
}
});

Bạn cũng có thể sử dụng tiki:for-item để gán tên khác thay vì giá trị mặc định item. Tương tự, bạn có thể sử dụng tiki:for-index để gán tên khác cho index.

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

tiki:for cũng có thể sử dụng lồng nhau. Dưới đây là một ví dụ

<view tiki:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" tiki:for-item="i">
<view tiki:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" tiki:for-item="j">
<view tiki:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>

block tiki:for

Giống như tiki:if, bạn có thể sử dụng tiki:for trên thẻ <block>

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

tiki:key

Để định danh các phần tử trong mảng, TXML cung cấp hàm thuộc tính tiki:key. Bằng việc sử dụng tiki:key, khi dữ liệu trong mảng thay đổi, Mini App Framework sẽ chỉ cập nhật các dữ liệu thay đổi dựa vào key.

tiki:key có thể sử dụng theo 2 cách

  • tiki:key nhận một giá trị string, string này là thuộc tính để định danh id cho item trong mảng
<switch tiki:for="{{objectArray}}" tiki:key="unique" style="display: block;"> {{item.id}} </switch>
Page({
data: {
objectArray: [
{ id: 5, unique: 'unique_5' },
{ id: 4, unique: 'unique_4' },
{ id: 3, unique: 'unique_3' },
{ id: 2, unique: 'unique_2' },
{ id: 1, unique: 'unique_1' },
{ id: 0, unique: 'unique_0' }
]
}
});

Mỗi phần tử trong mảng objectArray đều có thuộc tính unique, bằng việc sử dụng tiki:key="unique" trong TXML, chúng ta xác định rằng key của item là sẽ là thuộc tính unique này.

  • tiki:key cũng có thể nhận giá trị là từ khoá *this, có nghĩa là key của item là chính nó. Chúng ta chỉ nên sử dụng tiki:key="*this" nếu như mảng chỉ chứa các chuỗi, hoặc các number
<switch tiki:for="{{numberArray}}" tiki:key="*this" style="display: block;"> {{item}} </switch>
Page({
data: {
numberArray: [1, 2, 3, 4]
}
});