Infinite Scroll for Polymer 1.0 (without appending)

Question

Tried mixing some jQuery but everything is based on appending, something I don't wanna use because i'm trying to base my design completely on binding and stamping templates and elements. I tried using scrollTop in various ways but I always ended up being depended on what's appended on the local DOM. If i'm not mistaken, dom-repeat has nothing to do with appending, but with creating the same stamp and bind it multiple times (correct me if i'm wrong, I started looking into Polymer 1 recently).

I only found this one good example of using infinite scroll over a repeating template https://github.com/chadliu23/event-infinite-scroll but unfortunately it's not what i'm looking for as I'm mixing iron-ajax parsing data into my template. Simulating chadliu23's example lead me into a silly middle step of creating an extra array and pushing data from ajax into it, but it is totally something I don't want to do cause it's messing with my repeatable template restamping. Also realized that there are ways to create infinite scrolling-ish effects with css but can't figure out any other way to implement this but in sets of images.

Meanwhile, sadly, it seems like iron-list is nowhere near ready yet and I can't find any way to use the concept idea of core-list into polymer 1.0.

So..... Any suggestions on the table?

Answer 1

I think you need an item-page component:

<dom-module id="item-page">
  <template>
    <iron-ajax id="ajax"
      params="{{_composeParamsForPage(page)}}"
      last-response="{{pageData}}">
    </iron-ajax>
    <template is="dom-repeat" items="{{pageData}}" as="item">
      <!-- Compose your list of items for this page here -->
    </template>
  </template>

  <script>
    (function(){
      "use strict";

      Polymer({
        is: 'item-page',
        properties: {
          page: {
            type: Number,
            observer: '_updatePage(page)'
          }
        },
        _updatePage: function(page) {
          this.$.ajax.generateRequest();
        }
      });
    })();
  </script>
</dom-module>

Then, to create an infinitely scrolling list:

<template is="dom-repeat" items="{{pages}}" as="page">
  <item-page page="{{page}}"></item-page>
</template>

It's important that in your item-page component the iron-ajax does not have auto set, because the page property will initially be set to undefined. Instead, you should observe page and act accordingly only once it's updated to something other than undefined.