小程式開發基礎篇之資料綁定下（8）

教學接微信小程式開發教學(基礎篇)7-資料綁定上，當需要展示一組資料時，可以使用wx:for

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

//.js
age({
  data: {
    array: [{
      message: &#39;foo&#39;,
    }, {
      message: &#39;bar&#39;
    }]
  }
})

其中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用在2b5957c2850173214f4ea7f1261e9a0f標籤上，以渲染一個包含多節點的結構塊

<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: &#39;我没有被选中&#39;},
      {id: 2, name: &#39;我没有被选中&#39;},
    ],
  },

  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, name: &#39;我没有被选中&#39;}].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: &#39;我没有被选中&#39;},
      {id: 2, name: &#39;我没有被选中&#39;},
    ],
  },

  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length + 1, name: &#39;我没有被选中&#39;}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  checkboxChange: function(e){
    console.log(&#39;checkboxChange&#39;)
    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 = &#39;我被选中了&#39;
              ischecked = true
          }
       }
       if (!ischecked){
         checkBoxArray[i].name = &#39;我没有被选中&#39;
       }
    }
    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" 這句話

如果清單中項目的位置會動態改變或有新的項目加入清單中，並且希望清單中的項目保持自己的特徵和狀態（如0f0306f9b187f2e363126bc29c8b1420

中的輸入內容，698d939a2c9041f2302734cfeb04788e 的選取狀態），需要使用
wx:key 來指定清單中項目的唯一的識別碼。

wx:key 的值以兩種形式提供1 字串，代表在for 迴圈的array 中item 的某個property，該property的值需要是列表中唯一的字串或數字，且不能動態改變。
2 保留關鍵字
*this 代表在for 迴圈中的item 本身，這種表示需要item 本身是一個唯一的字串或數字，

上面引用自微信官方教程。除了用於保持視圖元件的狀態外，使用

wx:key還有助於提高渲染效率

當資料改變觸發渲染層重新渲染的時候，會校正帶有key的元件，框架會確保他們被重新排序，而不是重新創建，以確保使元件保持自身的狀態，並且提高清單渲染時的效率。

以上是小程式開發基礎篇之資料綁定下（8）的詳細內容。更多資訊請關注PHP中文網其他相關文章！