在另一个函数中使用从模板生成的 id

Using generated id from template in another function?

本文关键字：id 函数 另一个      更新时间：2023-09-26

这里有点麻烦。我需要在单击我拥有的图像时播放音频文件。在我的模板中设置了一堆图像 + 它们的腐蚀性音频文件（有效）：

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

我将音频元素设置为 display: none因此当您单击图像时，它只会播放音频而不是播放按钮。到目前为止，一切顺利，但是！我对此模板的所有值都存储在此数组中：

<script>
    Polymer('card-container', {
        carddata: [],
        ready: function() {
            this.carddata = [
                {imgurl: '../www/img/soundcard-imgs/img1.jpg', quote: 'What?', soundurl: '../www/card-sounds/sound1.m4a', soundId: 'sound1'},
                {imgurl: '../www/img/soundcard-imgs/img2.jpg', quote: 'Tickle tickle!', soundurl: '../www/card-sounds/sound2.m4a', soundId: 'sound2'}
            ];
        },
        playaudio: function() {
            var audioId = //need to get ID here somehow
            audioId.play();
        }
    });
</script>

如您所见，我需要获取该特定<sound-card>的{{s.soundId}}并将其传递给playaudio函数，以便为正确的图像播放正确的声音。我一直在寻找，但找不到获取数组数据绑定生成的 id 的方法。

有什么提示吗？谢谢！

try event.target.templateInstance.model.s.soundId

我不确定您的代码在应用程序的上下文中是什么，所以我做了一些假设（希望是好的假设）。这是一个代码笔，为您提供更通用的解决方案。

一个简单的播客示例

聚合物元素进口（为简单起见合并） 
<!-- In reference to : http://stackoverflow.com/questions/28978974/using-generated-id-from-template-in-another-function -->
<polymer-element name="sound-card" 
                 attributes="image url quote">
    <template>
        <style>
            :host div {
                margin-left: 1em;
            }
            :host img {
                margin-right: 1em;
            }
            :host h3 {
                display: block;
                white-space: wrap;
                font: bold 1.5em/1 Arial, san-serif; 
            }
        </style>
        <div layout horizontal>
            <img src="{{image}}" 
                 alt="Audio cover picture" 
                 on-click="{{playAudio}}">
            <section>
                <h3>{{quote}}</h3>
                <audio controls preload="auto" autobuffer> 
                    <source src="{{url}}" type="audio/mpeg">
                </audio>
            </section>
        </div>
    </template>
    <script>
     Polymer('sound-card', {
         playAudio: function() {
             this.shadowRoot.querySelector('audio').play();
         }
     });
</script>
</polymer-element>
<polymer-element name="play-list" 
             attributes="list">
    <template>
        <style>
            :host div {
                margin: 2em;
            }
            :host sound-card {
                margin-bottom: 1em;
            }
        </style>
        <div layout horizontal wrap center>
            <template repeat="{{sound in sounds}}">
                <sound-card image="{{sound.image}}" 
                            quote="{{sound.quote}}" 
                            url="{{sound.url}}">
                </sound-card>
            </template>
        </div>
    </template>
    <script>
        Polymer('play-list', {
            listChanged: function(oldVal, newVal){
                this.sounds = JSON.parse(newVal);
            },
            ready: function(){
                this.sounds = JSON.parse(this.list);
            }
        });
    </script>
</polymer-element>

主 JS 文件 
var data = [
      {
        "image" : "http://static.libsyn.com/p/assets/7/d/2/e/7d2eff1d932bd82f/episode-34-icon-small.png",
        "quote" : "34: Tenon.io & Web Accessibility",
        "url" : "http://traffic.libsyn.com/thewebplatform/episode-34_tenon-and-web-accessibility.mp3"
      },
      {
        "image" : "http://static.libsyn.com/p/assets/2/e/0/c/2e0cacdeefe15ec0/episode-32-small.png",
        "quote" : "32: Microsoft Spartan & Internet Explorer",
        "url" : "http://traffic.libsyn.com/thewebplatform/episode-32_microsoft-spartan-and-internet-explorer.mp3"
      }
    ];
document.querySelector('play-list').setAttribute('list', JSON.stringify(data));
相关文章：