Polymer 始终在熨斗列表中保留选定项目

这将导致

未捕获范围错误：超过最大调用堆栈大小。

以下是此行为的实现：

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

.选定{
背景：蓝色；
颜色：白色；
}
铁名单{
高度：200px；
宽度：200px
}
[[项目名称]]
聚合物({
是：“测试元素”，
特性：{
数据：{type:Array，
通知：正确，
值：函数（）{return[
{“姓名”：“鲍勃”}，
{“name”：“Tim”}，
{“name”：“Mike”}
]
;}
},
最后：对象
},
就绪：函数（）{
this.last=this.data[0]；
},
itemChanged:函数（）{
if（this.$.list.selectedItem==null）{
this.async（函数（）{
if（this.$.list.selectedItem==null）{
this.$.list.selectItem（this.last）；
}
}.约束（这个）；
}否则{
this.last=this.$.list.selectedItem；
}
},
_computedClass:函数（选定）{
返回所选？“所选”：；
}
});

相关位位于

itemChanged

changed函数中。

---

有一件事让它变得棘手，那就是铁名单会为每个选择触发两个事件。首先，它将取消选择以前选择的项目，然后选择新项目。因此，为了确定是否没有选择新项目，您必须等待并查看是否触发了新的选择事件。这就是我使用

async

的目的。然后，我还在

last

属性中存储对先前选定项的引用。如果没有选择新项目，我会将选择还原到最后一个选择。

我不知道铁名单可能是什么，但在我看来，当您设置

此选项时，selected

会再次调用

itemChanged

，从而创建一个无限循环。在

itemChanged

的开头放一个

console.log

，看看情况是否如此。这是一个铁名单。您认为它以循环结束是正确的，因为selectItem会再次更改项目。也就是说，我仍然不清楚什么是简单的聚合物溶液。我可以想出另一个变量来防止循环，但这一切都让简单的事情变得如此复杂。解决这个问题的显而易见的办法是不要更改

itemChanged

函数中的

selected

。还有我对框架的两分钱：一旦你开始为框架而不是你的应用程序更费劲，就立即转储它们。到目前为止，我只发现flex是有用的（在整个余烬、backbase、google的东西中，有很多神奇的东西），你甚至不能称之为框架。谢谢你的解决方案。多痛苦啊：-（。我在经过一段时间的调试后才找到这个解决方案，并检查了web是否有更明智的方法，但这似乎是一个可行的方法。另请参阅我也同意。这是一个变通方法，而不是我希望在生产中使用的适当解决方案。

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

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