无限滚动聚合物3和获取API

好吧，首先，告诉我我下的是正确的兔子洞吗

我正在建造一个新的PWA，它将首先为移动设备设计

我已经构建了我的后端API，我正在开发我的前端。 我正在使用聚合物3与瓦丁网格目前

我试图做的是让列表无限滚动，这应该很简单，但我一直没有得到任何地方的例子

谁能给我指出正确的方向吗

    import { PolymerElement, html } from '@polymer/polymer/polymer- 
    element.js';
    import '@polymer/iron-ajax/iron-ajax.js';
    import '@vaadin/vaadin-grid/vaadin-grid.js';
import './shared-styles.js';

class MyView1 extends PolymerElement {

  static get template() {
return html`
  <style include="shared-styles">
    :host {
      display: block;

      padding: 10px;
    }
  </style>

  <div class="card">
    <div class="circle">

        </div>
    <h1>View One</h1>
     <vaadin-grid aria-label="Basic Binding Example" items="[[data]]">

  <vaadin-grid-column>
    <template class="header">RecordID</template>
    <template>[[item.recordID]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">File Ref</template>
    <template>[[item.fileRef]]</template>     
  </vaadin-grid-column>

<vaadin-grid-column>
    <template class="header">Description</template>
    <template>[[item.description]]</template>     
  </vaadin-grid-column>

</vaadin-grid> 

  </div>

`;
  }

connectedCallback(){
super.connectedCallback();
fetch('http://localhost:56132/api/matters')
.then(r => r.json())
.then(data => this.data = data);
}

}


window.customElements.define('my-view1', MyView1);

从'@polymer/polymer/polymer-
元素js'；
导入“@polymer/iron ajax/iron ajax.js”；
导入“@vaadin/vaadin grid/vaadin grid.js”；
导入“./shared styles.js”；
类MyView1扩展了聚合关系{
静态获取模板（）{
返回html`
：主持人{
显示：块；
填充：10px；
}
视图一
文档编号
[[item.recordID]]
文件引用
[[item.fileRef]]
描述
[[项目说明]]
`;
}
connectedCallback（）{
super.connectedCallback（）；
取（'http://localhost:56132/api/matters')
.then（r=>r.json（））
.然后（data=>this.data=data）；
}
}
window.customElements.define（'my-view1'，MyView1）；

有一个使用

vaadin grid

填充回调数据的示例（而不是直接设置所有项目）：（检查

分配远程/功能数据的演示）

（将示例中的代码粘贴到此处，以使此答案更具前瞻性）


#
[[索引]]
名字
[[item.firstName]]
姓
[[item.lastName]]
addEventListener（'WebComponentsReady'，function（）{
聚合物({
是：“x-remote-data-example”，
就绪：函数（）{
该尺寸=200；
this.dataProvider=函数（参数，回调）{
var xhr=new XMLHttpRequest（）；
xhr.onload=函数（）{
回调（JSON.parse（xhr.responseText.result）；
};
var index=params.page*params.pageSize；
xhr.open（'GET'，'https://demo.vaadin.com/demo-data/1.0/people?index=“+index+”&count=“+params.pageSize，true）；
xhr.send（）；
};
}
});
});

基本上，您需要设置
数据提供程序
属性，而不是直接使用
项

但请记住，您仍然需要知道数据集的总大小，如演示说明中所述：

注意：项目总数必须设置为网格。下面的示例使用size属性设置项目总数

我已经看过这个例子，并在Polymer 2中很好地实现了它，但我根本无法让它在P3中工作。还有一个在API文档中使用
dataProvider
的JS示例，请参阅“使用函数数据提供程序的延迟加载”：
<x-remote-data-example></x-remote-data-example>
<dom-module id="x-remote-data-example">
  <template preserve-content>
    <vaadin-grid aria-label="Remote Data Example" data-provider="[[dataProvider]]" size="[[size]]">

      <vaadin-grid-column width="60px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">First Name</template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">Last Name</template>
        <template>[[item.lastName]]</template>
      </vaadin-grid-column>

    </vaadin-grid>
  </template>
  <script>
    window.addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'x-remote-data-example',

        ready: function() {
          this.size = 200;
          this.dataProvider = function(params, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
              callback(JSON.parse(xhr.responseText).result);
            };
            var index = params.page * params.pageSize;
            xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
            xhr.send();
          };
        }

      });
    });
  </script>
</dom-module>