如何正确使用熨斗可选?像铁页一样使用时，项目显示为null

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

本文关键字：一样 显示 null 项目 何正确      更新时间：2023-09-26

我有一个相当简单的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的设置代码甚至比这更少，但不知何故可以工作，所以我不确定这里出了什么问题。

这种行为的原因很简单：
  • iron-selectable将this.items设置为附着后的内容节点
  • 它通过观察selected并填充this.items（如果它们还没有）来实现这一点

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

要绕过此问题，请侦听iron-select事件，该事件保证在iron-selectable观察器之后执行。

如果您需要知道上一个值（因为iron-select没有传递它），请在selected观察器中设置它，并在事件侦听器中读取它。

相关文章：