r2d r2d - 12 days ago 7
Javascript Question

polymer Child dom loaded

I have one problem getting the moment when polymer child element DOM are loaded. Here is my case:

When i press a button, in father component, ajax request is triggered. When get response is binded to variable, which goes to dom-repeat and creates child items. So my problem is to caught that moment when all child elements are loaded, because i want to use

this.$$()
to select child component and trigger needed method and scroll into view.

If i use
this.$$()
selector after get request, after
that.set('variable', response)
, DOM still hasn't got those child components (to early).

Tried also to put selector in
attached()
, but it attaches when page is loaded , before button pressed, so when button pressed, this method is not called.

Any advices how to get that moment when i can use selector to select child element?

Thank you!

Answer

Try listening on dom-change event of dom-repeat

<base href="https://polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<dom-module id="repeat-completion">
  <template>
    <style></style>
    <template is="dom-repeat" items="{{items}}" as="item" on-dom-change="_domComplete">
      <div id$="num{{index}}">{{item}}</div>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'repeat-completion',
    properties: {
      items: {
        type: Array,
        value: function() {
          return [1, 2, 3, 4, 5]
        }
      }
    },
    _domComplete: function(e) {
      console.log("complete", e);
      console.log(this.$$("#num1"));
    }
  })
</script>


<repeat-completion></repeat-completion>