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 with key 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 });
    }
  },
});