iron-ajax、iron-list、iron-scroll-threshold経由のロードによるJSONファイルの処理

Question

大規模なJSONファイルを1000個以上のアイテムを持つビューにロードしようとしています。一度に20個。私がiron-listを使用するたびに、ウィンドウのサイズを変更してjsonのすべてのアイテムを一度に読み込むまで、3つのアイテムしかレンダリングしません。

最初に20個のアイテムをどのようにレンダリングしてから、下にスクロールすると、もっと多くのアイテムが得られますか？

ありがとうございました。

<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

私はあなたのiron-listのコンテナ（<content class="horizintal>）が問題を引き起こす可能性があり、明示的なサイズを、持っていないことを前提としています。 docs

重要によると

：鉄のリストは、明示的なサイズであるか、または明示的なサイズの親にスクロール を委任する必要があります。 「明示的にサイズ指定された」という場合、 は、明示的なCSS高さプロパティがクラスまたは インラインスタイルに設定されているか、他のレイアウト手段（たとえばflexクラスまたは フィットクラス）によってサイズが設定されていることを意味します。

代わりにあなたは、resizeイベントを発射することができますが、データ設定した場合：

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