Grundlagen der Miniprogrammentwicklung: Datenbindung (8)

block wx:ifwx:forwx:key

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

benötigen, schauen Sie sich zunächst ein Beispiel an:

wx:keyDer obige Code erstellt zwei

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

Kompilieren Sie den Code und die folgende Schnittstelle wird angezeigt:checkbox

Schreiben Sie hier die Bildbeschreibung
Klicken Sie auf die Schaltfläche und die Schnittstelle wird angezeigt sein wie folgt:

Schreiben Sie hier die Bildbeschreibung
ok, hier ist alles normal, um das Problem besser zu erklären Verarbeitung des Kontrollkästchen-Auswahlereignisses. Ändern Sie den Text in „Ich wurde ausgewählt“. Der entsprechende Code lautet wie folgt:

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

Schreiben Sie hier die Bildbeschreibung
Was passiert, wenn Sie auf die Schaltfläche „Komponente hinzufügen“ klicken? Der erwartete Effekt sollte wie folgt sein folgt

Hier eine Bildbeschreibung schreiben
Der tatsächliche Effekt ist jedoch wie im Bild unten

Schreiben Sie hier eine Bildbeschreibung
und Sie können das Rendering sehen. Die Engine hat den ausgewählten Effekt nicht an die Daten gebunden, was zu unerwarteten Ergebnissen führte. Wenn Sie den gewünschten Effekt erzielen möchten, müssen Sie die .wxml-Datei wie im obigen Code gezeigt mit

ändern, um den gewünschten Effekt zu erzielen > 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>

Eingabeinhalt, ausgewählter Status), müssen Sie wx:key = "id" verwenden, um die eindeutige Kennung des Elements in der Liste anzugeben. Der Wert von

wird in zwei Formen bereitgestellt:
1 Zeichenfolge, die eine Eigenschaft des Elements im Array der for-Schleife darstellt. Der Wert der Eigenschaft muss die einzige Zeichenfolge oder Zahl sein in der Liste und kann nicht dynamisch geändert werden. wx:key2 Reservierte Schlüsselwörter

repräsentieren das Element selbst in der for-Schleife. Diese Darstellung erfordert, dass das Element selbst eine eindeutige Zeichenfolge oder Zahl ist.

wx:key
Das Obige stammt aus dem offiziellen WeChat-Tutorial . Zusätzlich zur Beibehaltung des Zustands der Ansichtskomponenten kann die Verwendung von
auch dazu beitragen, die Rendering-Effizienz zu verbessern. *this

wx:key

Das obige ist der detaillierte Inhalt vonGrundlagen der Miniprogrammentwicklung: Datenbindung (8). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!