如何使用 iron-pages 通知页面转换

Question

我正在通过构建一个只有几页的简单应用程序来使用 Polymer Starter Kit。我希望其中一个页面显示它从服务器加载的项目列表。问题是此列表必须仅在页面可见/过渡到时加载。我应该如何通知 "lazy-list" 实际开始加载数据？

<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>

Answer 1

不确定这是否是最佳解决方案，但我只是为包含该部分的 "Page" 创建了一个新元素。此元素侦听属性更改，并在将 "iron-selected" 添加到 class 名称时加载列表。

<dom-module id="some-page">

  <style>

   </style>

  <template>

    <paper-material>
        <lazy-list id="list"></lazy-list>
     </paper-material>

  </template>

  <script>
    (function() {
      Polymer({
        is: 'some-page',

        ready : function(){

        },

        attributeChanged : function(name, type){
          if(this.getAttribute('class').includes('iron-selected')){
              this.$.list.refreshList();
          }
        }

      });
      })();
  </script>

</dom-module>

Answer 2

或者您可以只观察 route 并在 route === "some-page" 时将刷新请求发送到 <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>

不需要新元素。

如何使用 iron-pages 通知页面转换

How to notify page transition with iron-pages

polymer

polymer-1.0