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

以下是您的工作代码：

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

Answer 2

复杂的观察者在观察者数组中声明。复杂的观察者可以监视一个或多个路径。这些路径称为观察者的依赖关系。

我只是忘了使用一个复杂的观察者。我不确定为什么对象在选择时会改变两次。我知道后我会立即更新这个答案。

[编辑：观察者更改为仅观察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>

vaadin-grid选择不起作用

2 个答案: