如何處理定製聚合物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代碼聚合物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處理活動項目更改事件的聚合物元件中的功能。