Polymer - DOM-IF의 항목이 첫 번째 호출에서 null을 반환 함

Polymer 준비 및 요소가 올바르게 작동하는 방식을 이해하는 데 문제가 있기 때문에 필자는 작성 중입니다. Polymer 2.0을 사용하고 있습니다.Polymer - DOM-IF의 항목이 첫 번째 호출에서 null을 반환 함

<template is="dom-if" if="{{isExpanded}}"> 
     <div id="drop-down-list" > 
      <template is="dom-repeat" items="{{employees}}"> 
       <button on-click="onDropDownItemClick" class="button-style items">{{item}}</button> 
      </template> 
     </div> 
    </template>

isExpandend이 false입니다 시작에 내 템플릿에서

나는이 코드를 가지고있다. 따라서 버튼이 숨겨져 있거나 생성되지 않았습니까?

그런 다음 몇 가지 기능에 나는 true에 isExpandend 전환 및 그 방법에 약간의 스타일을 업데이트 할 :

var items = this.shadowRoot.querySelectorAll('.items'); 
      for(var i=0; i< items.length; i++){ 
       items[i].style.height = itemHeight; 
      }

문제는 -이 솔루션은이 기능에 초 이상 항목으로 작동합니다. 그래서이 함수를 처음 호출하면 항목은 null이고 아무 것도 변경되지 않지만 두 번째 호출시 더 많은 항목 = [], 코드가 올바르게 작동합니다.

이 버그를 복구하려면 어떻게해야합니까?

"async"로 뭔가를해야합니까? 스택에서 찾을 수 있지만 사용법을 모릅니다.

출처

2017-05-07 Maciej Wójcik

이것은 Polymer의 올바른 동작이지만 도움이 될 수 있도록 구성 요소 소품과 'isExpanded'를 업데이트하는 기능을 공유하십시오. – Kyle

이 문제에 대한 가능한 해결책이 하나 있습니다. 나는 너무 ID 템플릿을 추가

이 내가 쓰는 코드를 JS 전에

DOM-경우 :

this.$["templateID"].render();

이 노력하고 있습니다,하지만 난 그게 좋은 몰라?

출처

2017-05-07 21:18:01

아마도이 문제에 대한 올바른 대답은 아닙니다. – Ergo

isExpanded의 전환을 어떻게 수행합니까? 일반적으로 무언가가 처음에는 작동하지 않았지만 나중에 상호 작용할 때 업데이트합니다. 즉, 값을 잘못 변경했기 때문에 변경 사항을 알리는 데 set 또는 push api를 사용해야합니다.

예를 들어 플 런커를 만들 수 있다고 생각하십니까?

출처

2017-05-08 15:50:35 Ergo

Polymer - DOM-IF의 항목이 첫 번째 호출에서 null을 반환 함

답변

관련 문제