访问 <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)'
],
无法理解如何访问 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)'
],