How to use iron-selectable correctly? Items appear to be null when used like iron-pages

Question

I have a fairly simple Polymer element which implements IronSelectableBehavior but I find that this.items is always an empty array.

I have it setup the same way iron-pages is, simply with child elements and not much else:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-selector/iron-selectable.html">
<dom-module id="test">
    <template>
        <style>
        </style>
        <div id="container">
            <content></content>
        </div>
    </template>
    <script>
    (function(root) {
        'use strict';

        Polymer({
            is: 'test',

            behaviors: [Polymer.IronSelectableBehavior],

            observers: [
                '_selectedChanged(selected)'
            ],

            _selectedChanged: function(val, prev) {
                var self = this,
                    selected = this._valueToItem(val);

                if(!selected) {
                    throw val.toString() + ' not found.';
                }
            }
        });
    })(window);
    </script>
</dom-module>

With the following example:

<test attr-for-selected="data-test" selected="{{selected}}">
    <div data-test="one"></div>
    <div data-test="two"></div>
</test>

When _selectedChanged is called, selected is undefined because this.items is an empty array.

iron-pages is setup with even less code than this but somehow works, so I'm unsure what is wrong here.

Answer 1

The reason for this behaviour is fairly simple:

• iron-selectable sets this.items to the content nodes after attachment
• It does this by observing selected and populating this.items if they are not already

This causes issues if you want to interact with this.items in your own selected observer, simply because the array is not yet populated by the time your observer is executed.

To get around this, listen on the iron-select event which is guaranteed to execute after the iron-selectable observer.

If you need to know the previous value (because iron-select doesn't get it passed), set it in a selected observer and read it in your event listener.