vaadinグリッドの選択が機能しない

Question

行の選択が機能しません。 selectedItems配列は、すべてを一度に選択すると変更されます。私は何かが間違っているのか、それともバグか分からない。

selectedItems：選択した項目を含む配列。ここで https://www.webcomponents.org/element/vaadin/vaadin-grid/elements/vaadin-grid

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

<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> 
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html"> 

<dom-module id="schedule-vaadin-test"> 

    <template> 

     <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items="{{selectedItems}}"> 

      <vaadin-grid-selection-column auto-select> 
      </vaadin-grid-selection-column> 

      <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> 
    </template> 

    <script> 
     /** 
     * @customElement 
     * @polymer 
     */ 
     class ScheduleVaadinTest extends Polymer.Element { 
      static get is() { 
       return 'schedule-vaadin-test'; 
      } 

      static get properties() { 
       return { 
        items: { 
         type: Array, 
         value: [{"firstName":"Foo", "lastName":"Bar"}, 
           {"firstName":"Foo", "lastName":"Bar"}, 
           {"firstName":"Foo", "lastName":"Bar"}] 
        }, 

        selectedItems: { 
         type: Array, 
         observer: 'selectedItemsChanged' 
        } 
       }; 
      } 

      static get observers() { 
       return [] 
      } 

      selectedItemsChanged() { 
       console.log(this.selectedItems); 
      } 
     } 

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

Answer 1

オブザーバーアレイで複雑なオブザーバーが宣言されています。複雑なオブザーバは、1つまたは複数のパスを監視できます。これらのパスはオブザーバの依存関係と呼ばれます。

複雑なオブザーバを使用するのを忘れてしまった。なぜオブジェクトが選択時に2回変化するのかわかりません。私は知ってすぐにこの回答を更新するつもりです。

[EDIT：オブザーバーのみspliceを観察するために変更されます。配列の値は2回変化しませんが、ワイルドカード（*）オブザーバを使用していたのでコンソールに2回印刷しています。これはスプライスが観察されたときに観察者を最初に呼び出した後、アレイの長さの変化を観察したときに観察者を呼びました。 ]

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

<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> 
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html"> 

<dom-module id="schedule-vaadin-test"> 

    <template> 

     <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items="{{selectedItems}}"> 

      <vaadin-grid-selection-column> 
      </vaadin-grid-selection-column> 

      <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> 
    </template> 

    <script> 
     /** 
     * @customElement 
     * @polymer 
     */ 
     class ScheduleVaadinTest extends Polymer.Element { 
      static get is() { 
       return 'schedule-vaadin-test'; 
      } 

      static get properties() { 
       return { 
        items: { 
         type: Array, 
         value: [{"firstName":"Foo1", "lastName":"Bar1"}, 
           {"firstName":"Foo2", "lastName":"Bar2"}, 
           {"firstName":"Foo3", "lastName":"Bar3"}] 
        }, 
        /*activeItem: { 
         type: Array, 
         observer: '_activeItemChanged' 
        },--this is not being used*/ 

        selectedItems: { 
         type: Array 
        } 
       }; 
      } 

      static get observers() { 
       return [ 
        //'_selectedItemsChanged(selectedItems.*)' 
         '_selectedItemsChanged(selectedItems.splices)' 
       ] 
      } 

      _selectedItemsChanged() { 
       console.log(this.selectedItems); 
      } 
     } 

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

Answer 2

あなたのための作業コードです：

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

<template> 

    <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items={{selectedItems}} active-item="{{selectedItem}}"> 

     <vaadin-grid-selection-column auto-select> 
     </vaadin-grid-selection-column> 

     <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> 
</template> 

<script> 
    /** 
    * @customElement 
    * @polymer 
    */ 
    class ScheduleVaadinTest extends Polymer.Element { 
     static get is() { 
      return 'schedule-vaadin-test'; 
     } 

     static get properties() { 
      return { 
       items: { 
        type: Array, 
        value: [{"firstName":"Foo", "lastName":"Bar"}, 
         {"firstName":"Foo2", "lastName":"Bar2"}, 
         {"firstName":"Foo3", "lastName":"Bar3"}] 
       }, 
       selectedItem: { 
        type: Array, 
       } 
       , 
       selectedItems: { 
        type: Array, 
       } 
      }; 
     } 

     static get observers() { 
      return ['_selectedItemsChanged(selectedItem, selectedItems)']; 
     } 

     _selectedItemsChanged(selectedItem, selectedItems){ 
      console.log(selectedItems); 
     } 
    } 

    customElements.define(ScheduleVaadinTest.is, ScheduleVaadinTest); 
</script> 

activeItemプロパティを追加しました。このプロパティは、最後にやりとりしたアイテムを保持します。また、観察者を変更して単一または複数の変化を観察する。