如何处理自定义聚合物 2 元素中的 vaadin-grid 事件？

Question

我需要在自定义 Polymer 2 元素中包含一个 vaadin-grid，并且需要处理行选择事件，但我似乎无法让它工作。我已经设法从提供的各种入门模板和演示中拼凑了这个，并且基本的点击事件处理程序可以工作，但我不知道如何处理行选择。我实际上正在使用 vaadin-grid 的 v3.0.0-beta1，因为我无法让 v2 工作，但我认为那不是我的问题。

有谁知道在将 vaadin 组件包含在您自己的自定义元素中时如何处理这些事件？

谢谢。

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

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-ajax auto url="https://demo.vaadin.com/demo-data/1.0/people?count=200" handle-as="json" last-response="{{users}}"></iron-ajax>

    <vaadin-grid aria-label="My Test Grid" items="[[users.result]]" id="grid">
      <vaadin-grid-column width="50px" 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-column width="150px">
        <template class="header">Address</template>
        <template>
          <p style="white-space: normal">[[item.address.street]], [[item.address.city]]</p>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>
  </template>

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

      ready() {
        super.ready();

        this.$.grid.addEventListener('click', e => {
          this._handleClick(e)
        });

        // I added this listener code from here: https://vaadin.com/elements/-/element/vaadin-grid#demos
        // but it does nothing. I've also tried adding it to this, this.$, this.$.grid without success.
        // Should this event listener be added here, or if not, where exactly? The docs are very unclear.
        addEventListener('WebComponentsReady', function() {
          Polymer({
            is: 'my-element',

            properties: {
              activeItem: {
                observer: '_activeItemChanged'
              }
            },

            _activeItemChanged: function(item) {
              this.$.grid.selectedItems = item ? [item] : [];
              console.info('row clicked');
          }
        });

        // this works and outputs info like this: "vaadin-grid-cell-content-17 was clicked."
        _handleClick(e) {
          console.info(e.target.id + ' was clicked.');
        }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

我认为我在 addEventListener 中的代码是 Polymer 1.x 语法，但我不确定如何使用 Polymer 2.x.

获得相同的结果

Answer 1

我只使用了 vaadin-grid v2，但我下载了 v3.0.0-beta1 并在 demo/row-details.html 查看了包内部有一个关于如何处理活动行更改事件的示例。

       <vaadin-grid on-active-item-changed="_onActiveItemChanged" id="grid" aria-label="Expanded Items Example" data-provider="[[dataProvider]]" size="200">

          <template class="row-details">
            <div class="details">
              <img src="[[item.picture.large]]"></img>
              <p>Hi! My name is [[item.name.first]]!</p>
            </div>
          </template>

        </vaadin-grid>

然后您可以在聚合物元素中定义一个名为 _onActiveItemChanged 的函数来处理活动项更改事件。

如何处理自定义聚合物 2 元素中的 vaadin-grid 事件？

How to handle vaadin-grid events in custom polymer 2 element?

web-component

polymer

vaadin-grid

polymer-2.x