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属性，将持有该项目的用户与已经过去的互动。另外，观察者被改变以观察单个或多个改变。