How can I refresh/reload Polymer element, when page changes?

Question

I created few custom elements. When they get ready(triggered by ready()), they start downloading JSON data from API, and show to the users. Want to use them in Single Page Application, and to download data when it becomes visible. Right now, it downloads all the data of all the pages first, because I used ready() event.

Is it possible to fire an event every time they become visible?

Answer 1

I found a solution. But, it's a little bit tricky. First, I added a function called isEqual.

app.isEqual = function(x, y) {
  return x === y;
};

And, used dom-if.

<section data-route="groups">
  <template is="dom-if" if="{{isEqual(route, 'groups')}}" restamp="true">
    <tend-groups-joined></tend-groups-joined>
  </template>
</section>

So, basically it compares the current route with a string parameter I pass, if it matches it restamps. A little bit tricky, but it worked.