如何正确使用iron-selectable？当像铁页一样使用时，项目似乎为空

Question

我有一个实现 IronSelectableBehavior 的相当简单的 Polymer 元素，但我发现 this.items 始终是一个空数组。

我的设置方式与 iron-pages 相同，仅使用子元素，其他不多：

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

用下面的例子：

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

调用_selectedChanged时，selected是undefined，因为this.items是一个空数组。

iron-pages 是用比这更少的代码设置的，但不知何故有效，所以我不确定这里出了什么问题。

Answer 1

这种行为的原因很简单：

iron-selectable 设置 this.items 为附件后的内容节点
它通过观察 selected 并填充 this.items（如果它们还没有）来做到这一点

如果您想在自己的 selected 观察器中与 this.items 进行交互，这会导致问题，原因很简单，因为在执行观察器时数组尚未填充。

要解决这个问题，请监听 iron-select 事件，该事件保证在 iron-selectable 观察者之后执行。

如果您需要知道以前的值（因为 iron-select 没有让它通过），请在 selected 观察器中设置它并在您的事件侦听器中读取它。

如何正确使用iron-selectable？当像铁页一样使用时，项目似乎为空

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

javascript

web-component

polymer