How do you know when templates have been initialized in polymer dart? - templates

Question

The polymer js docs say you have to listen for the WebComponentsReady event to know when the polymer elements have been set up. What's the equivalent in Dart?
Here's my template:
<template id="order_name" bind repeat>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#order_list" href="#collapseOne">
{{commonName}} ({{scientificName}})
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
</template>
And here's main:
void main() {
OrderList().then((order_data) {
query("#order_name").model = order_data;
print (queryAll(".accordion-heading")); //null
}).catchError((err) => print(err));
query("#my-button").onClick.listen((Event e) {
print (queryAll(".accordion-heading")); //[div,div]
});
}
OrderList is a wrapper around HttpRequest.getString() and returns a future. My thought was to use an event like WebComponenentsReady to know when the template had been fully instantiated. The base question is how can I get at the .accordion-heading divs in main so I can attach listeners to them?

Answer 1

I assume that you are using boot.js. if you are, they should be initialized by the time you program enters main().

Answer 2

According to the spec (https://www.dartlang.org/articles/web-ui/spec.html#main-script):
...you cannot query for children of conditional and iteration nodes. ...To retrieve a component instance you need to defer queries until the end of the event loop, for example using a Timer.run(f).
So the code above needs to be modified like this:
void main() {
OrderList().then((order_data) {
query("#order_name").model = order_data;
print (queryAll(".accordion-heading")); //null
Timer.run( () => print (queryAll(".accordion-heading"))); //[div,div]
}).catchError((err) => print(err));
query("#my-button").onClick.listen((Event e) {
print (queryAll(".accordion-heading")); //[div,div]
});
}