代码之家 › 专栏 › 技术社区 › Jonas Knobloch

瓦丁网格选择不起作用

vaadin-grid polymer-2.x polymer html javascript

Jonas Knobloch · 技术社区 · 7 年前

行选择不适用于我。selectedItems数组只有在我同时选择所有内容时才会更改。我不确定我是否做错了什么,或者这是一个bug。

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>

2 回复 | 直到 7 年前

Ofisora 7 年前

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

我只是忘了使用复杂的观察者。我不知道为什么选择时对象会更改两次。我会尽快更新这个答案。

编辑 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>

Ofisora 7 年前

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

属性,该属性将保存用户上次与之交互的项。此外,将观测器更改为同时观察单个或多个变化。