CODEWITHSUNDEEP
polymer-1.0
antibrian
antibrian

Reputation: 346

Access selectedItems of an <iron-list> on change

Having trouble understanding how to access the selectedItems property of an iron-list. When bound to a property of the parent, I can output it's contents using a template, but an observer or computed binding does not fire when it changes and I can't seem to output it's contents.

If anyone could point out what I'm doing wrong, how I can read the selectedItems for logic, or how I can observe changes to an iron-list selectedItems property, I would greatly appreciate the know how. Thanks.

Below is some example code to show how I am using the selectedItems property of iron-list:

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

Upvotes: 1

Views: 616

Answers (1)

Ricky
Ricky

Reputation: 1009

From the 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.

Therefore, remove the selectedItems property and add a manual observer like so:

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

Upvotes: 3

Related Questions