dom-repeat에서 요소를 쿼리하는 방법

Question

다트 코드에서 dom-repeat 요소에 의해 생성 된 요소를 쿼리하는 방법에 대한 명확한 답을 얻기 위해 웹을 수색했습니다.

sample.html

<dom-module id="so-sample> 
    <style>...</style> 
<template> 
    <template is="dom-repeat" items="[[cars]] as="car> 
    ... 
    <paper-button on-click="buttonClicked">Button</paper-button> 

    <paper-dialog id="dialog"> 
     <h2>Title</h2> 
    </paper-dialog> 
    </template> 
</template> 

sample.dart

I는 수입 또는 자동차를 속성을 채우기 위해 내 데이터베이스에 쿼리로, 여기에 상용구 코드를 생략 할 수 있습니다; 모든 것이 잘 작동합니다.

... 
@reflectable 
void buttonClicked(e, [_]) 
{ 
    PaperDialog infos = this.shadowRoot.querySelector("#dialog"); 

    infos.open(); 
} 

이 다음과 같은 오류가 발생 아무것도 작동하지 않기 때문에 Uncaught TypeError: Cannot read property 'querySelector' of undefined

나는없는 몇 가지 '솔루션'을 시도했다. 꽤 많은 스레드에서 본 유일한 것은 Timer.run()을 사용하고 콜백에 내 코드를 작성하는 것이지만 해킹처럼 보입니다. 타이머가 필요한 이유는 무엇입니까?

내 문제는 느리게 생성되는 dom-repeat의 내용이며 '전에'로컬 DOM에 추가 된 항목을 쿼리한다는 것입니다.

내가 따르지 않은 또 다른 조언은 Mutation Observers를 사용하는 것입니다. 나는 폴리머 API 문서에서 observeNodes 메서드가 대신 사용되어야한다는 것을 읽었습니다. 내부적으로 요소를 인덱싱하는 것을 처리하기 위해 내부적으로 MO를 사용했기 때문에, 다시 대화 상자를 여는 것이 조금 복잡해 보입니다.

최종 목표는 생성 된 각 모델의 버튼을 전용 용지 대화 상자에 바인딩하여 항목에 대한 추가 정보를 표시하는 것입니다. 누구도 그렇게 한 적이 있습니까? (나는 그렇게 희망한다 : p)

시간 내 주셔서 감사합니다!

업데이트 1 :

그들 중 누구도 실제로 스스로 일하지 않지만, 군터의 조언을 읽은 후 아이디는 DOM 반복 내부에 엉망이되지 않는다는 사실은 나를 생각하고 쿼리 종이 대화 만든 id 자체 대신이 나타나고 이제 대화 상자가 나타납니다!

sample.dart :

PaperDialog infos = Polymer.dom(root).querySelector("paper-dialog"); 

infos.open(); 

지금 내가 클릭 한 상품 ~

업데이트 2에 대화 상대 내부에 데이터를 바인딩 것이기 때문에 각 버튼은 관련 대화를 호출 할 수 있기를 바랍니다

:

아니요. 데이터 바인딩이 예상대로 작동하지 않았습니다. 두려워하는 것처럼 모든 버튼이 인덱스 0의 항목에 바인딩되었습니다. 올바른 종이 대화 상자을 쿼리하는 몇 가지 방법을 시도했지만 아무 것도 효과가 없었습니다. 내가 발견 한 유일한 '해결 방법'은 목록에 모든 종이 대화 상자를 쿼리 한 다음 해당 목록에서 'index-th' 요소를 가져 오는 것입니다.

@reflectable 
void buttonClicked(e, [_]) 
{ 
    var model = new DomRepeatModel.fromEvent(e); 
    List<PaperDialog> dialogs = Polymer.dom(this.root).querySelectorAll("paper-dialog"); 
    dialogs[model.index].open(); 
} 

이 코드는 확실히 작동하지만, 당신이 정말로 하나 필요하고 이미 어느 하나를 알고 모든 요소를 얻기 위해 자원의 낭비의 종류를 느낀다. 이 코드와

@reflectable 
void buttonClicked(e, [_]) 
{ 
    var model = new DomRepeatModel.fromEvent(e); 
    PaperDialog dialog = Polymer.dom(this.root).querySelector("dialog-${model.index}"); 
    dialog.open(); 
} 

... 
<paper-dialog id="dialog-[[index]]"> 
... 
</paper-dialog> 

, 대화 항상 널 :

는 그래서 그래, 내 초기 문제는 해결된다,하지만 자신의 ID에서 대화 상자를 조회 할 수없는 이유를 나는 아직도 궁금해 DOM 트리에서 올바르게 대화 상자를 찾을 수는 있습니다.

Answer 1

그늘진 DOM (기본값)으로 Polymers DOM API를 사용해야합니다. 그림자 DOM을 활성화하면 코드도 잘 작동합니다.

PaperDialog infos = new Polymer.dom(this).querySelector("#dialog")