聚合物多重铁崩解 [英] Polymer Multiple Iron-Collapse
问题描述
聚合物文档尚不清楚如何使用铁塌陷创建多重切换.是否有一种简单的方法来使每个项目切换?我看了多个铁塌陷不起作用，仅首先扩展，但我无法使它正常工作.从那时起，也许聚合物发生了一些变化.下面是我正在使用的代码的示例.
The polymer docs aren't clear on how to create a multiple toggle using iron-collapse. Is there an easy way to get each item to toggle? I had a look at multiple iron-collapse not working, expands only first but I could not get it to work. Maybe something has changed in polymer since then. Below is an example of the code I am using.
<div on-click="toggle"><paper-item><a class="paper-item-link"><strong>List Items</strong></a></paper-item></div>
<iron-collapse id="collapse">
<div>Content</div>
</iron-collapse>
<div on-click="toggle"><paper-item><a class="paper-item-link"><strong>List Items</strong></a></paper-item></div>
<iron-collapse id="collapse">
<div>Content</div>
</iron-collapse>
toggle: function() {
this.$.collapse.toggle();
},
推荐答案
聚合物的自动节点查找通过其ID映射节点，但是您有两个具有相同ID的节点，因此只有最后遇到的一个节点才会映射到该ID(即this.$.collapse指的是在您的示例中第二个iron-collapse).另外，由于您的click处理程序引用相同的iron-collapse，因此单击时两个paper-item都将切换相同的iron-collapse.
Polymer's automatic node finding maps nodes by their IDs, but you have two nodes with the same ID, so only the last one encountered would be mapped to that ID (i.e., this.$.collapse refers to the second iron-collapse in your example). Also, since your click-handler refers to the same iron-collapse, both paper-items would toggle the same iron-collapse when clicked.
最快的解决方案是为每个iron-collapse使用唯一的节点ID，并使用唯一的click处理程序:
The quickest solution would be to use unique node IDs for each iron-collapse and to use unique click handlers:
<head>
<base href="https://polygit.org/polymer+v1.9.2/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<div on-click="toggle1">
<paper-item>
<a class="paper-item-link"><strong>List Items</strong></a>
</paper-item>
</div>
<iron-collapse id="collapse1">
<div>Content</div>
</iron-collapse>
<div on-click="toggle2">
<paper-item>
<a class="paper-item-link"><strong>List Items</strong></a>
</paper-item>
</div>
<iron-collapse id="collapse2">
<div>Content</div>
</iron-collapse>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
toggle1: function() {
this.$.collapse1.toggle();
},
toggle2: function() {
this.$.collapse2.toggle();
}
});
});
</script>
</dom-module>
</body>
这篇关于聚合物多重铁崩解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
