Question

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

<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>

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

任何提示？谢谢！

Answer 1

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

Answer 2

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

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

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

2 个答案: