vaadin-grid 选择不起作用

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 属性，该属性将保存用户上次与之交互的项目。此外，观察者被更改为观察单个或多个变化。