Naliwe Naliwe - 11 months ago 63
Dart Question

How to query for an element inside a dom-repeat

I have been scouring the web for a clear answer on how to query for an element generated by a dom-repeat element from Dart code.


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

<paper-dialog id="dialog">


I'll omit the boilerplate code here, such as imports or the query to my database to fill the cars property ; everything works fine.

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

This generates the following error :
Uncaught TypeError: Cannot read property 'querySelector' of undefined

I have tried several 'solutions', which are not, since nothing works.
The only thing I saw on quite a lot of threads is to use
and write my code in the callback, but that seems like a hack. Why would I need a timer ?

I understand my problem may be that the content of the dom-repeat is generated lazily, and I query the items 'before' they are added to the local DOM.

Another advice I didn't follow is to use Mutation Observers. I read in the polymer API documentation that the observeNodes method should be used instead, as it internally uses MO to handle indexing the elements, but it again seems a bit complicated just to open a dialog.

My final objective is to bind the button of each generated model to a dedicated paper-dialog to display additional information on the item.
Has anyone ever done that ? (I should hope so :p)

Thanks for your time !


After reading Gunter's advices, although none of them actually worked by themselves, the fact that the IDs aren't mangled inside a dom-repeat made me think and query paper-dialog instead of the id itself, and now my dialog pops up !


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

I now hope that each button will call the associated dialog, since I'll bind data inside the dialog relative to the item I clicked ~

Thanks !

Answer Source

You need to use Polymers DOM API with shady DOM (default). If you enable shadow DOM your code would probably work as well.

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