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

複雜觀察員觀察員陣列中聲明。複雜的觀察者可以監視一個或多個路徑。這些路徑稱爲觀察者的依賴關係。

我只是忘了使用複雜的觀察者。我不確定爲什麼對象會在選擇時更改兩次。我會盡快更新這個答案。

[編輯：觀察者只改變觀察splice。數組的值不會改變兩次，但在控制檯打印兩次，因爲你使用的是通配符（*）的觀察員。當它觀察接頭時，首先觀察者首先呼叫觀察者，然後當觀察接頭觀察到陣列長度的變化時。 ]

<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屬性，將持有該項目的用戶與已經過去的互動。另外，觀察者被改變以觀察單個或多個改變。