在我的 100 JSON 个实例的 Polymer iron 列表中，不超过 26 <audio> 个项目有效

Question

我：4 级代码编写者（1-10 分）。

None 中索引大于“25”的 audio 标签似乎在我的 iron-list 中有效。我有一个 paper-icon-button 为每个模板实例触发 on-Tap="_playing" 以便通过使用使其相应的歌曲播放currentSound.play(); 它有效，但仅适用于歌曲 0-25。

我怀疑这与 iron-list docs 所说的有关。 "only' a small subset of actual template elements (enough to fill the viewport) are rendered and reused as the user scrolls"。但是我已经用了 7 个多小时了 :( 运气不好。

如果您查看 link 中的图像，您会注意到我将 controls 属性添加到 audio 标签。需要注意的一个有趣的一点是，所有 100 首歌曲都可以播放、暂停等等，使用这些原生控件，但是我只是用这些来测试，因为所有按钮都是为了定制。

我调查了这些本机 html 控件具有的任何可访问性，但一无所获。我还尝试在 dom-repeat 模板中理解 models 但也无法绕过它。帮助！我需要一些帮助！ :P

same image here

Answer 1

好的，我找到问题了（我想）！

您需要将方法 _playing 更改为：

_playing: function(item)
{
   var parentNode = Polymer.dom(item.target).parentNode;
   var currentSound = Polymer.dom(parentNode).querySelector(".theSound");
   currentSound.play();
}

那么您的第一个解决方案有什么问题？

当您写入：document.getElementsByClassName("theSound") 时，它会 return 您所有具有 class theSound 且当前 可见的元素（这是 iron-list 的特定行为，有关详细信息，请参阅 Dogs 评论），这意味着您不会获得第 26 个元素。如果您向下滚动并且该代码为运行，它仍然只有 return 25 个元素（例如 5-30），但它们在数组中的索引仍为 0-25。因此，当您按下第 30 个元素时，您将尝试访问元素 30，而它实际上位于数组中的第 25 位。

我的解决方案通过不依赖索引消除了这个问题。我所做的是选择被按下的项目的 parentNode 然后我用 class theSound within 那个节点搜索元素，因此它只会 return 一项（在您按下的行中）。

Answer 2

好的伙计们，感谢您的帮助。我想我找到了问题！我发现 <style> host: { position: absolute } 导致歌曲 0-25 重复 4 次直到 100，而不是继续播放 26-100。我删除了它，所有 100 首歌曲现在都可以正常播放。

然后，我尝试使用：

Polymer.dom(item.target).parentNode; & Polymer.dom(parentNode).querySelector(".theSound");

但无法成为我的 select.theSound。然后我像魔术一样尝试了 document.getElementsByClassName("theSound")[index]; 和 POOFF！现在一切正常 hoorraaaay

问题：position: absolute 主机样式让事情变得古怪。解决方案：将 position: absolute 移动到工具栏样式

在我的 100 JSON 个实例的 Polymer iron 列表中，不超过 26 <audio> 个项目有效

No more than 26 <audio> items work in my Polymer iron-list of 100 JSON instances

polymer

polymer-1.0