Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to notify page transition with iron-pages

I am playing around with the Polymer Starter Kit by building a simple application which has a few pages. I would like for one of the pages to display a list of items that it loads from the server. The issue is that this list must load only when the page is visible / transitioned into. How should I notify "lazy-list" to actually begin loading data?

<iron-pages attr-for-selected="data-route" selected="{{route}}">

 <section data-route="some-page">
   <paper-material>
      <lazy-list></lazy-list>
   </paper-material>
 </section>

 <section data-route="another page">
   <paper-material elevation="1">
      ...
   </paper-material>
 </section>

</iron-pages>
like image 511
grouma Avatar asked Mar 16 '23 17:03

grouma


1 Answers

Or you can just observe route and when route === "some-page", send the refresh request to <lazy-list>?

<dom-module id="my-app">
  <template>
    ...
    <iron-pages attr-for-selected="data-route" selected="{{route}}">

     <section data-route="some-page">
       <paper-material>
          <lazy-list id="list"></lazy-list>
       </paper-material>
     </section>

     <section data-route="another page">
       <paper-material elevation="1">
          ...
       </paper-material>
     </section>

    </iron-pages>
    ...
  </template>

  <script>
    Polymer({
      is: "my-app",
      properties: {
        route: {
          type: String,
          observer: "routeChanged"
        },
        ...
      },
      ...
      routeChanged: function (newval,oldval) {
        if (newval === "some-page") {
          this.$.list.refreshList();
        }
      },
      ...
    });
  </script>
</dom-module>

No new element needed.

like image 199
zerodevx Avatar answered Mar 27 '23 15:03

zerodevx