CODEWITHSUNDEEP
ajaxlistpolymerweb-component
Gilberg
Gilberg

Reputation: 2564

polymer iron-list only loading 20 items

I have an a test array that I am retrieving from iron-ajax with around 1000 items. I set that return array to the people property of my custom polymer element. Iron-list is displaying the first 20 results, but when i scroll down the rest of the results are not being loaded.

<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">

<dom-module id="people-list">
    <template>
        <iron-list items="[[people]]" as="item" class="flex">
            <template>
                <div style="background-color:white; min-height:50px;">[[item.city]]</div>
            </template>
        </iron-list>
        <iron-ajax 
            auto
            id="ajaxPeopleList"
            method="POST"
            url="/people/list"
            handle-as="json"
            last-response="{{people}}">
        </iron-ajax>
    </template>
    <script>
        Polymer({
            is: 'people-list',
            properties: {
                people: {
                    type: Array
                }
            }
        });
    </script>
</dom-module>

I think it may have to do with the height of the screen/iron-list element, but I am stuck and not sure how to proceed.

I can get it load all items if I set the height of the iron-list elements in pixels. But I just want it to fit on the screen. The docs make it look like you can use the iron-flex layout and use the class flex, which is what I tried to do in my sample code, but it has no effect.

Upvotes: 1

Views: 2238

Answers (2)

flumingo
flumingo

Reputation: 513

Ben Thomas is right. You're getting the json elements but it's not displayed because the iron-list needs to be redrawn. Since i had the same problem, i went to google polymers website and found THIS code example.

In short for your example:

<script>
// Only execute after DOM and imports (in our case the json file) has been loaded
HTMLImports.whenReady(function() {
  Polymer({
     is: 'people-list',
     properties: {
         people: {
             type: Array
         }
     },
    attached: function() {
      // Use the top-level document element as scrolltarget
      this.$.list.scrollTarget = this.ownerDocument.documentElement;
    }
  });
});

Upvotes: 2

Ben Thomas
Ben Thomas

Reputation: 3200

This is because nothing is firing the iron-resize event to tell the iron-list to redraw the items. According to the docs:

Resizing

iron-list lays out the items when it recives a notification via the iron-resize event. This event is fired by any element that implements IronResizableBehavior.

By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.

document.querySelector('iron-list').fire('iron-resize');

I've added the following to your code (which is probably a bit of a hack) and got it working:

ready: function () {
  document.addEventListener("scroll", function () {
    // fire iron-resize event to trigger redraw of iron-list
    document.querySelector('iron-list').fire('iron-resize');
  });
}

Upvotes: 5

Related Questions