polymer - 始终将选定的项目保留在铁列表中

Question

<iron-list id="list" class="flex" items="{{data}}" selected-item="{{selectedItem}}" x="[[itemChanged(selectedItem)]]" selection-enabled>
    <template>
        <div class$="[[_computedClass(selected)]]">
            <span class="flex">test</span>
        </div>
    </template>
</iron-list>

我正在寻找的解决方案就像一个 radio 组，在铁列表中总是有一个选择。

我试过了

itemChanged: function() {
    if (this.selectedItem) {
        this.selected = this.$.list.items.indexOf(this.selectedItem);
    } else {
        if(this.selected != null) { this.$.list.selectItem(this.selected);}
    }
},

这最终导致 Uncaught RangeError: Maximum call stack size exceeded.

Answer 1

这是此行为的一个实现:

<dom-module id="test-element">
    <style>
        .selected {
            background: blue;
            color: white;
        }
        iron-list {
            height: 200px;
            width:200px
        }
    </style>
    <template>
        <iron-list id="list" items="[[data]]" as="item"  selection-enabled on-selected-item-changed="itemChanged">
            <template>
                <div class$="[[_computedClass(selected)]]">[[item.name]]</div>
            </template>
        </iron-list>
    </template>
</dom-module>
<script>
    Polymer({
        is: "test-element",
        properties: {
            data: {type: Array,
                notify: true,
                value: function() { return [
                    {"name": "Bob"},
                    {"name": "Tim"},
                    {"name": "Mike"}
                ]
                        ;}
            },
            last: Object
         },
        ready: function(){
            this.last = this.data[0];
        },
        itemChanged: function(){
            if (this.$.list.selectedItem === null) {
                this.async(function(){
                    if (this.$.list.selectedItem === null) {
                        this.$.list.selectItem(this.last);
                    }
                }.bind(this));
            } else {
                this.last = this.$.list.selectedItem;
            }
        },
        _computedClass : function(selected) {
            return selected? "selected": "";
        }

    });
</script>

相关位在 itemChangedchanged 函数中。使它变得棘手的一件事是铁列表将为每个选择触发两个事件。首先，它将取消选择先前选择的项目，然后选择新项目。所以为了弄清楚是否没有选择新的项目，你必须等待，看看是否触发了新的选择事件。这就是我使用 async 的原因。然后我还在 last 属性中存储对先前选择的项目的引用。如果没有选择新项目，我会将选择恢复为上次选择。