4

Element needs some time for template-repeat to render all content, so paper-spinner is used to notify the user to wait.

How can I know that template-repeat has finished so I can turn off the spinner?

And related question: how can inner element "item-details" be selected? Again, template-repeat has to be finished first.

Here's the code I am using:

<polymer-element name="item-list">

  <template>
    <paper-spinner active></paper-spinner>

    <template id="repeat_items" repeat="{{ item  in  car.items }}">
         <item-details id="item_details" item="{{item}}"></item-details>
    </template>....

This is some simulation of the problem: plnkr.co

Edit

links from research:

spinner example

why does onmutation disconnect after first mutation?

polymer-how-to-watch-for-change-in-content-properties

Community
  • 1
  • 1
Goce Ribeski
  • 1,352
  • 13
  • 30

2 Answers2

4

There are component lifecycle hooks.

You are probably looking for domReady.

Called when the element’s initial set of children are guaranteed to exist. This is an appropriate time to poke at the element’s parent or light DOM children. Another use is when you have sibling custom elements (e.g. they’re .innerHTML‘d together, at the same time). Before element A can use B’s API/properties, element B needs to be upgraded. The domReady callback ensures both elements exist.

Polymer('tag-name', {
  domReady: function() {
     // hide the spinner 
     // select the first item details element
  }
});

As for selecting elements, you can traverse the component's shadow dom like so:

this.shadowRoot.querySelector(selector);

EDIT...

The domReady hook is great if you have all of your data up-front. If you get data asynchronously, then you can use a change watcher.

Here's is a fork of your plunkr that successfully selects the child components after the data changes. Notice the setTimeout(f, 1) that defers selection until after the DOM updates.

carsChanged: function(){
    var _this = this;
    setTimeout(function(){
       console.log(_this.shadowRoot.querySelectorAll('item-details'))
    },1)
}
posit labs
  • 8,951
  • 4
  • 36
  • 66
  • I did tested with domReady from the parent element, and No, it comes too early, template-repeat is not finished. Children elements are not selectable. There are child elements that are rendering their content after that event. Plunker example shows it. – Goce Ribeski Jan 23 '15 at 18:36
  • Oh, ok. So you are probably getting data from an ajax call, right? I will add to my answer. – posit labs Jan 23 '15 at 18:43
  • Yes, the data comes from AJAX call, and it's done in the parent ready() method. – Goce Ribeski Jan 23 '15 at 18:48
2

I suggest something like this - http://jsbin.com/bifene/4/edit

Leverages Polymer's onMutation function to watch for changes to a DOM node. Note that it only gets called once so you'll need to re-register it every time you load new items & restart the spinner.

sfeast
  • 956
  • 5
  • 7
  • Yes, that solves the given simulation of the problem. But in the real task every Item has it's own details, which is again separate element with AJAX loaded data - and those 'mutations' I can not catch. – Goce Ribeski Jan 27 '15 at 09:56