All Products
Search
Document Center

List rendering

Last Updated: Mar 24, 2021

a:for

Use a:for attribute on a component to bind an array and use data of each item in the array to re-render this component.

The subscript variable name of the current item in the array is index by default, the variable name of the current item in the array is item by default.

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

Use a:for-item to specify the variable name of the current element in the array. Use a:for-index to specify the variable name of the current subscript in the array.

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

a:for supports embedding.The following is the embedded sample code for Chinese multiplication table.

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

block a:for

Similar to block a:if , you can use a:for on the<block/> tag to render a structural block that contains multiple nodes.

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

a:key

If positions of list items dynamically change or a new item is added to the list, and you want to retain features and statuses of list items (for example, the input content in<input/> and the selected status of <switch/>), you need to use a:key to specify a unique identifier for each list item.

The value of a:key are provided in two forms:

  • String: represents 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 be dynamically changed.
  • The reserved word*this represents the list item itself and is a unique string or number. For example, when data change triggers a re-render, components with key will be corrected, the framework will ensure that the list items are reordered rather than recreated. This ensures components retain their statuses and improves the efficiency of list rendering.
Notes:
  • If a:key is not provided, an error will occur.
  • If you know that the list is static, or you do not need to pay attention to the list order, then a:key can be ignored.

Code sample:

 
  1. <view class="container">
  2. <view a:for="{{list}}" a:key="*this">
  3. <view onTap="bringToFront" data-value="{{item}}">
  4. {{item}}: click to bring to front
  5. </view>
  6. </view>
  7. </view>
 
  1. Page({
  2. data:{
  3. list:['1', '2', '3', '4'],
  4. },
  5. bringToFront(e) {
  6. const { value } = e.target.dataset;
  7. const list = this.data.list.concat();
  8. const index = list.indexOf(value);
  9. if (index !== -1) {
  10. list.splice(index, 1);
  11. list.unshift(value);
  12. this.setData({ list });
  13. }
  14. },
  15. });

key

key is a more common style of writing compared with a:key, which can be filled with arbitrary expressions or strings.

Note: key cannot be set on a block.

Code sample:

 
  1. <view class="container">
  2. <view a:for="{{list}}" key="{{item}}">
  3. <view onTap="bringToFront" data-value="{{item}}">
  4. {{item}}: click to bring to front
  5. </view>
  6. </view>
  7. </view>
 
  1. Page({
  2. data:{
  3. list:['1', '2', '3', '4'],
  4. },
  5. bringToFront(e) {
  6. const { value } = e.target.dataset;
  7. const list = this.data.list.concat();
  8. const index = list.indexOf(value);
  9. if (index !== -1) {
  10. list.splice(index, 1);
  11. list.unshift(value);
  12. this.setData({ list });
  13. }
  14. },
  15. });

At the same time, you can use key to avoid using a component repeatedly, for example, you can allow different types of data:

 
  1. <input a:if="{{name}}" placeholder="Enter your name" />
  2. <input a:else placeholder="Enter your email address" />

When you input the name value and switch to email, the current input value will be retained. If you do not want to retain the input value, you can add key.

 
  1. <input key="name" a:if="{{name}}" placeholder="Enter your name" />
  2. <input key="email" a:else placeholder="Enter your email address" />