List Rendering
a:for
Using a:for
attribute on component can bind an array, and then the data in the array can be used to render the component repeatedly.
The current item in the array has a default subscript variable name index
. The current item of the array has a default variable name item
.
<view a:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar',
}],
},
});
Use a:for-item
to specify the variable name for the current element of the array. Use a:for-index
to specify the current subscript variable name of the array.
<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
A:for
supports nesting.
Below are the sample codes for the Multiplication Table nesting.
<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="i">
<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="j">
<view a:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
block a:for
Similar to block a:if
, a:for
can be used on the <block/>
tag to render a structural block with multiple nodes.
<block a:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
a:key
If the list item may change position dynamically or new item will be added into the list, and it is expected to maintain the features and state of the list item (such as the entry contents of <input/>
and the checked status of <switch/>
), the a:key
should be used to specify the unique identifier of the list item.
The a:key
value is provided in one of the two modes:
- String: Representing an attribute of the list item. The attribute value needs to be a unique string or number in the list, such as ID, and cannot change dynamically.
- Reserved keyword
*this
: Representing the list item itself. Moreover, it is the unique string or number. For example, when the change of the current data triggers re-rendering, the component withkey
will be rectified. The framework ensures they are reordered, but not recreated. In this way, the component can maintain its status, increasing the list rendering efficiency.
Note:
- If the
a:key
is not provided, it reports a warning.
- This can be ignored if it is known the list is static or the order is not concerned.
Below are the sample codes:
<view class="container">
<view a:for="{{list}}" a:key="*this">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
</view>
</view>
</view>
Page({
data:{
list:['1', '2', '3', '4'],
},
bringToFront(e) {
const { value } = e.target.dataset;
const list = this.data.list.concat();
const index = list.indexOf(value);
if (index !== -1) {
list.splice(index, 1);
list.unshift(value);
this.setData({ list });
}
},
});
key
The key
is a more popular writing style than a:key
, where any expression and string can be filled.
Note: The key
can not be set on block.
Below are the sample codes:
<view class="container">
<view a:for="{{list}}" key="{{item}}">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
</view>
</view>
</view>
Page({
data:{
list:['1', '2', '3', '4'],
},
bringToFront(e) {
const { value } = e.target.dataset;
const list = this.data.list.concat();
const index = list.indexOf(value);
if (index !== -1) {
list.splice(index, 1);
list.unshift(value);
this.setData({ list });
}
},
});