Как запросить элемент внутри dom-repeat

Question

Я прочесал веб-адрес, чтобы получить четкий ответ о том, как запросить элемент, сгенерированный элементом dom-repeat из кода Dart.

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 API, что вместо этого следует использовать метод watchNodes, поскольку он внутренне использует MO для обработки индексирования элементов, но снова кажется немного сложным только открыть диалог.

Моя последняя цель - связать кнопку каждой сгенерированной модели с выделенным диалоговым окном бумаги, чтобы отобразить дополнительную информацию об элементе. Кто-нибудь когда-либо делал это? (Надеюсь, что так: p)

Спасибо за ваше время!

Update 1:

После прочтения советов Гюнтера, хотя ни один из них на самом деле не работал сам по себе, тому факту, что идентификаторы не наломать внутри РОМ повторе заставил меня думать и запрос бумажно-диалога вместо самого идентификатора, и теперь появляется мой диалог!

sample.dart:

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

infos.open(); 

теперь я надеюсь, что каждая кнопка будет вызывать соответствующий диалог, так как я свяжу данные в диалоговом по отношению к пункту я щелкнул ~

Update 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(); 
} 

Этот код определенно работает, но он чувствует себя своего рода трата ресурсов, чтобы получить все элементы, когда вы действительно нуждаетесь только, и вы уже знаете, какой из них.

Так что да, моя первая проблема решена, но я до сих пор удивляюсь, почему я не мог запросить диалоги из их идентификатору:

... 
<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(); 
} 

С помощью этого кода, диалог всегда нуль, хотя я могу найти эти диалоги, правильно id-ied, в дереве DOM.

Answer 1

Вам необходимо использовать API-интерфейс Полимеров с теневым DOM (по умолчанию). Если вы включите теневой DOM, ваш код, вероятно, будет работать.

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