javascript - 如何正确使用选铁器？像铁页一样使用时，项目似乎为空

Question

我有一个相当简单的 Polymer 元素，它实现 IronSelectableBehavior但我发现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 观察者之后执行。 p>

如果您需要知道之前的值(因为 iron-select 没有让它通过)，请将其设置在 selected 观察者中并在您的事件中读取它听众。