微信小程序開發教程(基礎篇)8-數據綁定下

教程接上篇，當須要展現一組數據時，可使用wx:for

//.wxml
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//.js
age({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

其中index是當前數據索引的默認變量名，item是當前數據項的默認變量名。
也可使用 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/>標籤上，以渲染一個包含多節點的結構塊

<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
    })
  },
})

上面的代碼建立了兩個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時，界面以下

這時若是點擊添加組件按鈕會怎樣呢，指望的效果應該以下

然而實際效果確是下圖這樣的

能夠看到渲染引擎並無將選中的效果和數據綁定起來，致使出現了預期以外的結果。若是想要達到預期效果，就要使用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文件修改成上述代碼所示，就能夠實現預期效果，重點就在 wx:key = "id" 這一句

若是列表中項目的位置會動態改變或者有新的項目添加到列表中，而且但願列表中的項目保持本身的特徵和狀態（如 <input/>
中的輸入內容，<switch/> 的選中狀態），須要使用 wx:key 來指定列表中項目的惟一的標識符。

wx:key 的值以兩種形式提供
1 字符串，表明在 for 循環的 array 中 item 的某個 property，該 property的值須要是列表中惟一的字符串或數字，且不能動態改變。
2 保留關鍵字 *this 表明在 for 循環中的 item 自己，這種表示須要item 自己是一個惟一的字符串或者數字，

上面引用自微信官方教程。除了用於保持視圖組件的狀態外，使用wx:key還有助於提升渲染效率

當數據改變觸發渲染層從新渲染的時候，會校訂帶有 key的組件，框架會確保他們被從新排序，而不是從新建立，以確保使組件保持自身的狀態，而且提升列表渲染時的效率。