カスタムポリマー2要素のバージングリッドイベントを処理する方法は？

Question

カスタムPolymer 2要素にvaadin-gridを含める必要があり、行選択イベントを処理する必要がありますが、動作させることができません。私はさまざまなスターターテンプレートとデモのオファーを提供しています。基本的なクリックイベントハンドラーは機能しますが、行の選択をどのように処理するかはわかりません。私はv2を動作させることができなかったので、実際にvaadin-gridのv3.0.0-beta1を使用していますが、それは私の問題だとは思いません。

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を中に私のコードは、ポリマー1.xの構文があると思いますが、私は、ポリマーの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という関数を定義することができます。