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

【问题标题】：Using generated id from template in another function?在另一个函数中使用从模板生成的 id？
【发布时间】：2015-03-11 05:08:37
【问题描述】：

这里有点麻烦。我需要单击我拥有的图像播放音频文件。在我的模板中设置了一堆图像及其对应的音频文件（有效）：

<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 的方法。

有什么建议吗？谢谢！

【问题讨论】：

不能把声音ID作为图片标签的属性吗？然后会在点击事件中发送（playaudio:function(event){...})

标签： javascript data-binding polymer shadow-dom

【解决方案1】：

试试 event.target.templateInstance.model.s.soundId

【讨论】：

这似乎得到了正确的 soundId。现在修复我的音频播放功能.. 谢谢！ :-) 非常简单。

【解决方案2】：

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

A Simple Podcast Example

聚合物元素导入（为简单起见合并）

<!-- 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));

【讨论】：