iron-list and load data with "pages"

I have Google Endpoints service with list-method what returned some data.

I can display this data in iron-list - everything is ok here.

But - since array of data is big - I like to return it from list by some "pages" - for example by 100 elements.

So, question is - how to fire getting new portion of data then iron-list will be scrolled down to the end of already received array? Any samples or suggestion on it?

Solution

iron-scroll-threshold is appropriate here. In the following example, _loadMoreData() is called when the iron-list is scrolled to 200px from the bottom, which in your case is where you'd query your Google Endpoints service to fetch more data.

// template
<iron-scroll-threshold id="threshold"
                       lower-threshold="200"
                       on-lower-threshold="_loadMoreData">
  <iron-list scroll-target="threshold" items="[[items]]">
    <template>
      <div>[[index]]: [[item]]</div>
    </template>
  </iron-list>
</iron-scroll-threshold>

// script
Polymer({
  ...
  _loadMoreData: function() {
    var data = this.queryGoogleEndpointService();
    // append data to `this.items`
  }
}

<head>
  <base href="https://polygit.org/polymer+1.11.1/iron-scroll-threshold+PolymerElements+:1.x/webcomponents+webcomponents+:v0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="iron-list/iron-list.html">
  <link rel="import" href="iron-scroll-threshold/iron-scroll-threshold.html">
  <link rel="import" href="paper-progress/paper-progress.html">
</head>
<body>
<x-foo></x-foo>

<dom-module id="x-foo">
  <template>
    <style>
      iron-list {
        height: 400px;
      }
    </style>

    <iron-scroll-threshold id="threshold"
                           lower-threshold="200"
                           on-lower-threshold="_loadMoreData"
                           lower-triggered="{{nearBottom}}">
      <iron-list scroll-target="threshold" items="[[items]]">
        <template>
          <div>[[index]]: [[item]]</div>
        </template>
      </iron-list>
    </iron-scroll-threshold>

    <template is="dom-if" if="[[nearBottom]]">
      <paper-progress indeterminate></paper-progress>
    </template>
  </template>

  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-foo',
        properties: {
          items: {
            type: Array,
            value: function() { return []; }
          }
        },
        _loadMoreData: function() {
          console.log('loading 100 more...');

          // simulate network delay
          this.async(function() {
            for (let i = 0; i < 100; i++) {
              this.push('items', Math.random());
            }
            this.$.threshold.clearTriggers();
          }, 500);
        }
      });
    });
  </script>
</dom-module>
</body>

codepen