javascript - 可以获得 templateInstance 值但不能将其用于其他函数？

Question

我最近刚刚弄清楚如何从我的模板实例之一获取元素的 id，并尝试在另一个函数中使用它，但是尽管控制台日志返回正确的 ID，但当我尝试使用它们时，例如在我的 .play() 函数中，它说“未定义不是函数”。无论我尝试执行什么功能，无论是事件监听器还是其他任何功能，都会发生这种情况!我认为问题可能与 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();