教程接微信小程序開發(fā)教程(基礎篇)7-數(shù)據(jù)綁定上，當需要展示一組數(shù)據(jù)時，可以使用wx:for
//.wxml
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
//.js
age({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
其中index是當前數(shù)據(jù)索引的默認變量名奖亚，item是當前數(shù)據(jù)項的默認變量名。
也可以使用 wx:for-item 和 wx:for-index 來指定別名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
也可以嵌套使用析砸，如下面是一個九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
類似block wx:if昔字，也可以將wx:for用在<block/>標簽上，以渲染一個包含多節(jié)點的結構塊
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
要理解為什么需要wx:key首繁，先來看一個例子:
//.wxml
<checkbox wx:for="{{objectArray}}" value="{{item.name}}" style="display: block;"> {{item.name}} </checkbox>
<button bindtap="addToFront">在上方添加一個新的check組件</button>
//.js
Page({
data: {
objectArray: [
{id: 1, name: '我沒有被選中'},
{id: 2, name: '我沒有被選中'},
],
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, name: '我沒有被選中'}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
})
上面的代碼創(chuàng)建了兩個checkbox組件和一個按鈕作郭，當點擊按鈕會在最上方新增一個checkbox組件。
編譯代碼弦疮，會顯示如下界面:
點擊按鈕夹攒，界面如下：
ok，到這里一切正常 胁塞，為了更好的說明問題咏尝，加入checkbox選中事件的處理压语，當checkbox被選中時，將文字修改為"我被選中了"编检，相關代碼如下：
//wxml
<checkbox-group bindchange="checkboxChange">
<checkbox wx:for="{{objectArray}}" value="{{item.id}}" style="display: block;" > {{item.name}}
</checkbox>
</checkbox-group>
<button bindtap="addToFront">在上方添加一個新的check組件</button>
//js
Page({
data: {
objectArray: [
{id: 1, name: '我沒有被選中'},
{id: 2, name: '我沒有被選中'},
],
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length + 1, name: '我沒有被選中'}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
checkboxChange: function(e){
console.log('checkboxChange')
const length = this.data.objectArray.length
let checkBoxArray = this.data.objectArray
for (let i = 0; i < length; i++) {
let ischecked = false
for (let j = 0; j < e.detail.value.length; j++){
if (checkBoxArray[i].id == e.detail.value[j]){
checkBoxArray[i].name = '我被選中了'
ischecked = true
}
}
if (!ischecked){
checkBoxArray[i].name = '我沒有被選中'
}
}
this.setData({
objectArray: this.data.objectArray
})
}
})
當選中第一個checkbox時胎食，界面如下
這時如果點擊添加組件按鈕會怎樣呢，期望的效果應該如下
然而實際效果確是下圖這樣的
可以看到渲染引擎并沒有將選中的效果和數(shù)據(jù)綁定起來允懂，導致出現(xiàn)了預期之外的結果厕怜。如果想要達到預期效果，就要使用wx:key
<checkbox-group bindchange="checkboxChange">
<checkbox wx:for="{{objectArray}}" wx:key = "id" value="{{item.id}}" style="display: block;" > {{item.name}}
</checkbox>
</checkbox-group>
<button bindtap="addToFront">在上方添加一個新的check組件</button>
將.wxml文件修改為上述代碼所示蕾总，就可以實現(xiàn)預期效果粥航，重點就在 wx:key = "id" 這一句
如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態(tài)（如 <input/>
中的輸入內(nèi)容谤专，<switch/> 的選中狀態(tài)）躁锡，需要使用wx:key來指定列表中項目的唯一的標識符。
wx:key的值以兩種形式提供
1 字符串置侍，代表在 for 循環(huán)的 array 中 item 的某個 property映之，該 property的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變蜡坊。
2 保留關鍵字*this代表在 for 循環(huán)中的 item 本身杠输，這種表示需要item 本身是一個唯一的字符串或者數(shù)字，
上面引用自微信官方教程秕衙。除了用于保持視圖組件的狀態(tài)外蠢甲，使用wx:key還有助于提高渲染效率
當數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有 key的組件据忘，框架會確保他們被重新排序鹦牛，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)勇吊，并且提高列表渲染時的效率曼追。
