Handhabung großer JSON-Datei mit Eisen-Ajax, Eisen-Liste und Laden über Eisen-Scroll-Schwelle

Question

Ich versuche, eine große JSON-Datei in meiner Ansicht, die über 1000 Elemente enthält und ich möchte die Ansicht nur importieren 20 auf einmal. Jedes Mal, wenn ich iron-list verwende, werden nur 3 Elemente gerendert, bis ich die Größe des Fensters ändere und dann alle Elemente im JSON auf einmal lade.

Irgendeine Idee, wie ich 20 Artikel zuerst rendern kann und dann, wenn ich nach unten scrolle, bekomme ich mehr Artikel?

Danke.

<dom-module id="fetch"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
     paper-card{ 
     margin-bottom: 1em; 
     padding: 1em; 
     } 
    </style> 
    <h2>Hello [[prop1]]</h2> 
    <content class="horizontal"> 
     <paper-material> 
      <iron-ajax 
       auto 
       url="/some.json" 
       handle-as="json" 
       last-response="{{ajaxResponse}}" 
       debounce-duration="300"></iron-ajax> 

<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold"> 
     <iron-list items="[[ajaxResponse]]" scroll-target="threshold"> 
      <template> 
      <paper-card> 
       <div id="card-content"> 
       <h4>User:{{item.val}}</h4> 
       <h4>{{item.val2}}</h4> 
       </div> 
       <div class="card-action"> 
       <paper-button>Icon</paper-button> 
       <paper-button>Like</paper-button> 
       <paper-fab>Open</paper-fab> 
       </div> 
      </paper-card> 
      </template> 
     </iron-list> 
     </iron-scroll-threshold> 
     </paper-material> 
    </content> 
    </template> 

    <script> 

    Polymer({ 
     is: 'fetch', 

     properties: { 
     prop1: { 
      type: String, 
      value: 'fetch' 
     }, 
     } 
    }); 
    </script> 
</dom-module> 

Answer 1

Ich gehe davon aus, dass der Behälter (<content class="horizintal>) Ihre iron-list keine explizite Größe hat, die Probleme verursachen kann.

Nach der docs

Wichtig: Eisen-Liste muss entweder explizit Größe sein, oder delegieren zu einer expliziten Größe Mutter Scrollen. Mit "explizit Größe", we bedeutet, dass es entweder eine explizite CSS-Höhe Eigenschaft über eine Klasse oder Inline-Stil gesetzt hat, oder wird durch andere Layout Mittel (z. B. die Flex oder Fit-Klassen).

alternativ können Sie ein Resize-Ereignis ausgelöst, wenn Sie den Datensatz:

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