Applet の wxml rendering list

There is a list of rendering meaning

To the electricity supplier, for example, we want to render the five commodity, but hope easy to change, we will be dynamically added in wxml in.

<view>

　　<block wx:for="{{products}}" wx:for-item="item" wx:key="index">

　　　　<view>{{index+1}}:{{item.name}}</view>

　　</block>

</view>

Page({
  data: {
    message: "hello world",
    products: [{
        name: "商品A"
      },
      {
        name: "商品B"
      },
      {
        name: "商品C"
      },
      {
        name: "商品D"
      },
      {
        name: "商品E"
      }
    ]
  }

})

In a non-display components above the block, we have five to render the content view

wx: for a loop through the array, wx: for-item list that is to assign aliases

Sub-cycle

<view wx:for="{{parentList}}">
 
  {{item.id}}
 
  <view wx:for="{{item.childList}}" wx:for-item="items">
 
  {{items.name}}{{items.account}}
 
  </view>
 

wx: key to stable rendering, rendered as a unique identifier to think (there are three)

1, a string
representative of a property of the for loop in Array of item, the value of the property needs to be unique in the list of strings or numbers, and can not be changed dynamically. 

data: {
input_data: [
{ id: 1, unique: "unique1" },
{ id: 2, unique: "unique2" },
{ id: 3, unique: "unique3" },
{ id: 4, unique: "unique4" },
]
}
//test.wxml
<input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />

 

2, reserved keywords * this
represents the cycle for item itself, this representation requires a unique item itself string or a number, such as: 
when the data changes trigger re-rendering render layer when the key will be corrected with components, frameworks will ensure that they are re-ordered, rather than re-create, in order to ensure that the components retain their status, and to improve the efficiency of a list rendering.

data: {
numberArray: [1, 2, 3, 4],
stringArray:['aaa','ccc','fff','good']
}
//test.wxml
<input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" />
<input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />
},

 

It is typically assigned a unique field (similar to the definition id);

3, wildcard + name 

With wx: key and without contrast　　

 

wk:key	Component Identification	Rendering case	State case	for efficiency
Have	The components may identify	Changing only the order rendering component	To maintain the original state before assembly	efficient
no	Component does not recognize	Re-create the components when rendering	The initial state of the reset component	low efficiency

　　

 

1. Need wx:keycircumstances

Location of items in the list will dynamically change or new items added to the list

Wish list items maintain their characteristics and status
(e.g. <input /> contents inputted, <switch /> is selected)