dom-repeat内の要素を照会する方法

Question

ダーツコードからdom-repeat要素によって生成された要素を照会する方法について、Webを精査しています。

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

私は車プロパティを埋めるために、このような私のデータベースにインポートまたはクエリとして、ここでは定型コードを省略します。すべて正常に動作します。

... 
@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に追加される前のアイテムを照会するということが問題であると理解しています。

私が従わなかったもう一つのアドバイスは、突然変異観察者の使用です。私はポリマーAPIのドキュメントで、observeNodesメソッドを代わりに使うべきであることを読んでいます。これは内部的に要素のインデックス付けを処理するためにMOを使用していますが、もう一度ダイアログを開くだけです。

最終的な目的は、生成された各モデルのボタンを専用の紙ダイアログにバインドして、アイテムに関する追加情報を表示することです。 これまで誰もしていますか？ （私はそう期待しなければならない：p）

ありがとう！

アップデート1：

ギュンターのアドバイスを読んだ後、それらのどれもが、実際に自分で働いていませんが、IDは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(); 
} 

このコードは間違いなく動作しますが、それはあなたが本当に一つだけを必要とし、あなたはすでにどちらを知っているときすべての要素を取得するためにリソースの無駄のようなものを感じています。

そうそう、私の最初の問題が解決されていますが、私は自分のIDからダイアログを照会することができなかった理由を、私はまだ疑問に思う：このコードで

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

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

、ダイアログは、常にnullであります私はDOMツリー内で正しく識別されたダイアログを見つけることができます。

Answer 1

DOM DOM（デフォルト）のPolymers DOM APIを使用する必要があります。 shadow DOMを有効にすると、おそらくコードも機能します。

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