How to do pagination of grid inside a Polymer 2 custom element?

Flow
1

I need to paginate a grid which I’ve included inside a Polymer 2 custom element, but of all the various ways of adding listeners and observers that I’ve seen, none of them so much as allow me to console.log() something to show that it’s being called. What is the correct way to listen for the “items-changed” or “itemsChanged” (and by the way, just how should it be spelled??) event when using a vaadin-grid (3.0.0-beta1) inside a Polymer 2 custom element?

Thanks.

2

Here’s my code

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/vaadin-grid/vaadin-grid.html">

<dom-module id="my-custom-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <vaadin-grid id="grid" [b]
on-items-changed="_itemsChanged"
[/b] data-provider="[[dataProvider]
]">

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

      <vaadin-grid-column width="100px" flex-grow="0" resizable>
        <template class="header">User ID</template>
        <template>[[item.userId]
]</template>
      </vaadin-grid-column>

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

  <script>
    class MyCustomElement extends Polymer.Element {
      static get is() { return 'my-custom-element'; }

      static get observers() {
        return [
          [b]
'_itemsChanged(items, page)'
[/b]
        ]
      }

      [b]
// This doesn't get called (whether I use the observers above or on-items-changed property on the grid HTML itself
      _itemsChanged(items, page) {
        console.log("_onItemsChanged");
      }
[/b]

      ready() {
        super.ready();

        this.$.grid.size = 10;
        this.$.grid.dataProvider = function(params, callback) {
          var xhr = new XMLHttpRequest();
          xhr.onload = function() {
            callback(JSON.parse(xhr.responseText));
          };
          var index = params.page * params.pageSize;
          xhr.open('GET', 'http://localhost:3000/data?_page=' + index + '&_limit=' + params.pageSize, true);
          xhr.send();
        };

      }
    }

    window.customElements.define(MyCustomElement, MyCustomElement);

  </script>
</dom-module>
3

I tried to embolden the significant bits but even though it lets you add bold tags inside code, it doesn’t work, but the forum now won’t let me edit it to remove them, so just ignore the [code]
[b]

[/b]
[/code] tags