可以获取 templateInstance 值但不能将其用于其他功能？

Question

我最近才想出如何从我的一个模板实例中获取元素的 ID，并试图在另一个函数中使用它，但是尽管控制台记录 returns 正确的 ID，当我尝试使用它们，就像在我的 .play() 函数中一样，它说 "undefined is not a function"。无论我尝试执行什么功能，无论是事件监听器还是其他任何功能，都会发生这种情况！我认为问题可能与 javascript 如何查看 shadowDOM 中的元素有关？我不完全确定。这是我的函数：

//plays an audio file by it's id specified in a repeating template
playAudio: function () {
    var audioId = event.target.templateInstance.model.s.soundId;
    console.log(audioId);
    //^ that is correct in the console log for every ID
    var image = event.target.templateInstance.model.s.imgId;
    console.log(image);
    //^ further tests, this is correct for every img ID
    audioId.play();
    //"undefined is not a function"
}

然后是我的重复模板，它在 img 元素上有 on-click:{{playAudio}}。

<template>
    <div layout horizontal wrap center center-justified class="asdf">
        <template repeat="{{s in carddata}}">
            <sound-card>
                <img src="{{s.imgurl}}" id="{{s.imgId}}" on-click="{{playAudio}}">
                <span>{{s.quote}}</span>
                <audio id="{{s.soundId}}" src="{{s.soundurl}}" controls preload="auto"></audio>
            </sound-card>
        </template>
    </div>
</template>

关于 javascript 如何处理我从重复模板中获得的元素，我是否遗漏了什么？

Answer 1

你不能弹弦。相反，您需要首先获取实际的 DOM 元素，如下所示：

document.getElementById(audioId).play();

可以获取 templateInstance 值但不能将其用于其他功能？

Can get templateInstance value but can't use it for another function?

javascript

shadow-dom

polymer