2017-11-22 9 views
0

폴리머에 샘플 프로그램을 작성하고 있습니다. 호출)Polymer : checked 속성을 변경 한 후 체크 박스 요소가 업데이트되지 않습니다.

<template is="dom-repeat"> 
 
    <li class="clearfix title-container"> 
 
     <input type="checkbox" checked="{{item.checked::change}}" class="checkbox-container float--left" /> 
 
     <label class="label-container">{{item.id}}</label> 
 
    </li> 
 
</template>

I는 (F1을 작용있는 클릭을 아래와 같이 버튼이 :

<button on-click="f1">Save</button>

아래와 같이 I 템플릿을

처음에는 모든 확인란이 선택되어 있습니다. 사용자가 일부 확인란의 선택을 취소 한 다음 버튼을 클릭 할 수 있습니다. f1()은 사용자가 검사 한 모든 요소를 ​​수집합니다. f1을 실행 한 후 모든 체크 박스를 다시 확인하십시오.. 다음

//Collect all the selected items in a separate array. 
 
//Revert unchecked checkboxes to checked. 
 
f1: function() { 
 
    newIndex = 0; 
 
    for (index = 0; index < this.dataArray.features.length; index++) { 
 
    if (this.dataArray.features[index].checked) { 
 
     this.newDataArray.selectedElements[newIndex++] = this.dataArray.features[index]; 
 
    } else { 
 
     this.dataArray.features[index].checked = true; 
 
    } 
 
    } 
 
}

가 dataArray 요소의 정의는 (I는 콘솔에 인쇄) : F1위한 코드()는 다음과 같다

//The dataArray when printed in a console 
 
{ 
 
    type: "FeatureCollection", 
 
    features: Array(4) 
 
} 
 
features: Array(4) 0: { 
 
    type: "Feature", 
 
    checked: true 
 
} 
 
1: { 
 
    type: "Feature", 
 
    checked: true 
 
} 
 
2: { 
 
    type: "Feature", 
 
    checked: true 
 
} 
 
3: { 
 
    type: "Feature", 
 
    checked: true 
 
}

내가 직면 한 문제는 f1()이 c hecked 속성은 배열의 모든 값을 검사하도록 지정했지만 UI에 반영되지 않습니다. 직접적으로 반영되지 않는 하위 속성에 대해 읽었지만 여기서 notifyPath()를 어떻게 사용하는지 또는 배열 변경 방법을 어떻게 사용하는지 이해할 수 없습니다. 어떤 도움을 주셔서 감사합니다.

답변

0

당신은 배열 돌연변이 방법을 사용해야합니다. 폴리머는 배열의 변화에 ​​대해 알지 못하므로 notifyPath으로 전화하거나 array mutation methods을 사용해야합니다.