访问 <iron-list> 的 selectedItems on change

Access selectedItems of an <iron-list> on change

无法理解如何访问 iron-list 的 selectedItems 属性。当绑定到父级的 属性 时,我可以使用模板输出它的内容,但是观察者或计算绑定在它更改时不会触发,我似乎无法输出它的内容。

如果有人能指出我做错了什么,我如何阅读 selectedItems 的逻辑,或者我如何观察铁列表 selectedItems 的变化 属性,我将不胜感激如何。谢谢

下面是一些示例代码,展示了我如何使用 iron-list 的 selectedItems 属性:

<dom-module id="example-component">

<template>
        <iron-list
            id="dataList"
            items="[[data]]"
            as="item"
            multi-selection
            selection-enabled
            selected-items="{{selectedItems}}">
            <template>
                <span>[[item.data]]</span>
            </template>
        </iron-list>
        <template is="dom-repeat" items="[[selectedItems]]" index-as="index">
            <div>[[item.data]]</div> <!-- this displays any selected item -->
        </template>
</template>

<script>
    Polymer({
        is: 'example-component',
        properties: {
            data: {
                type: Array,
                value: [
                    {
                        'data': "item 0"
                    },
                    {
                        'data': "item 1"
                    }
                ]
            },
            selectedItems:
            {
                type: Object,
                observer: '_selectedItemsChanged'
            }
        },
        _selectedItemsChanged: function(){
            console.log(this.selectedItems); //this neither runs nor outputs anything when an item is selected
        }
    });
</script>

来自docs

Finally, to observe mutations to arrays (changes resulting from calls to push, pop, shift, unshift, and splice, generally referred to as “splices”), specify a path to an array followed by .splices as an argument to the observer function.

因此,删除 selectedItems 属性 并添加一个手动观察器,如下所示:

observers: [
 '_selectedItemsChanged(selectedItems.splices)'
],