使用 dataProvider 时如何处理与 vaadin 网格绑定的项目数据

Question

我正在使用 vaadin 文档中的以下示例和 polymer3

<vaadin-grid id="grid" aria-label="Remote Data Example">
  <vaadin-grid-column path="firstName"></vaadin-grid-column>
  <vaadin-grid-column path="lastName"></vaadin-grid-column>
  <vaadin-grid-column path="email"></vaadin-grid-column>
</vaadin-grid>
<script>
  window.addEventListener('WebComponentsReady', function() {
    const grid = document.querySelector('vaadin-grid');

    grid.size = 200;
    grid.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>

我不知道如何使用聚合物数据绑定从加载的项目中更新行

我尝试使用 this.$.grid.items 访问网格中的 items 属性但这总是 returns 项目数

我希望能够做类似的事情 this.$.grid.items[0].firstName = 'changed' 并将更改反映到网格中

感谢任何帮助

Answer 1

目前，当使用 dataProvider 时，没有 API 用于更新单个项目。一种选择是使用 grid.clearCache() 再次为可见行生成网格请求数据。当然，在这种情况下，将项目存储在额外的缓存中会很有用，可以避免不必要的服务器请求。如果您使用 path 或 renderer，您还可以在更改子项后调用 grid.render()-属性.

请参阅 vaadin/vaadin-grid#1526 和相关的论坛帖子

使用 dataProvider 时如何处理与 vaadin 网格绑定的项目数据

How to handle items data binding with vaadin grid when using dataProvider

javascript

vaadin-grid

polymer-3.x