미니 프로그램 개발의 기초: 데이터 바인딩(8)

튜토리얼은 WeChat Mini 프로그램 개발 튜토리얼(기본) 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는 현재 데이터입니다. 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 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코드를 컴파일하면 다음 인터페이스가 표시됩니다.

여기에 그림 설명을 쓰세요

버튼을 클릭하면 인터페이스가 나타납니다. 다음과 같습니다:

여기에 그림 설명을 작성하세요

좋아, 문제를 더 잘 설명하려면 여기에 다음을 추가하세요. 체크박스 선택 이벤트 처리. 체크박스가 선택되었을 때 텍스트를 "I was selected"로 변경하고 관련 코드는 다음과 같습니다.

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

첫 번째 체크박스를 선택했을 때의 인터페이스는 다음과 같습니다

여기에 사진 설명을 쓰세요

이때 컴포넌트 추가 버튼을 클릭하면 어떻게 될까요? 팔로우

여기에 사진 쓰기 설명

그러나 실제 효과는 아래 사진과 같습니다

여기에 사진 설명을 쓰세요

렌더링 엔진을 볼 수 있고 선택한 효과가 데이터에 바인딩되지 않아 예상치 못한 결과가 발생합니다. 원하는 효과를 얻으려면

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 파일을 수정해야 원하는 효과를 얻을 수 있다는 것이 핵심입니다. 🎜 >

목록에 있는 항목의 위치가 동적으로 변경되거나 새 항목이 목록에 추가되고 목록에 있는 항목이 고유한 특성과 상태(예: < input/>wx:key = "id" , 선택 상태), 목록에서 항목의 고유 식별자를 지정하려면

을 사용해야 합니다.

의 값은 두 가지 형식으로 제공됩니다. wx:key1 문자열은 for 루프 배열의 항목 속성을 나타냅니다. 속성 값은 유일한 문자열 또는 숫자여야 합니다. 목록에 있으며 동적으로 변경할 수 없습니다.

2개의 예약된 키워드

는 for 루프에서 항목 자체를 나타냅니다. wx:key

위 내용은 WeChat 공식 튜토리얼에서 인용되었습니다. . 뷰 구성 요소의 상태를 유지하는 것 외에도 *this을 사용하면 렌더링 효율성을 높이는 데 도움이 될 수 있습니다.

데이터 변경으로 인해 렌더링 레이어가 다시 렌더링되면 키와 프레임이 있는 구성 요소가 수정됩니다. . 구성 요소가 자체 상태를 유지하고 목록 렌더링의 효율성을 향상시키기 위해 다시 생성되지 않고 재정렬되도록 합니다. wx:key

위 내용은 미니 프로그램 개발의 기초: 데이터 바인딩(8)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!