模板不重复？

Question

我有一个数组，它包含一些数据，我需要将这些数据绑定到我创建的自定义元素的不同部分。下面是该元素的相关部分：

<div class="soundcard-container" vertical layout>
    <content select="img"></content>
    <paper-ripple fit></paper-ripple>

    <div class="soundcard-bottom-container" horizontal layout center justified>
        <content class="soundcard-string" select="span"></content>
        <a class="soundcard-download-icon" href="#"></a>
    </div>
</div>

在我的index.html文件中，我试图这样重复它：

<div class="card-container" layout horizontal wrap>
<template repeat="{{s in carddata}}">
    <sound-card>
        <img src="{{s.imgurl}}">
        <span>{{s.quote}}</span>
    </sound-card>
</template>

​

我的数组相当大，但是这里是精简版本(在我的index.html文件中)：

<script>
Polymer({
   ready: function() {
       this.carddata = [
           {imgurl: '../www/img/soundcard-imgs/img1.jpg', quote: 'String one', sound: '../www/card-sounds/sound1.m4a'},
           {imgurl: '../www/img/soundcard-imgs/img2.jpg', quote: 'String two', sound: '../www/card-sounds/sound2.m4a'}
       ];
   }
});
</script>

我是不是搞错了？我以为{{s in carddata}}会对<sound-card>数组中的许多项重复<sound-card>自定义元素？我在聚合物站点上使用了初学者示例，但是当我在http服务器上运行它时，模板永远不会离开display: none。有什么想法吗？或者例子什么的！谢谢!

Answer 1

只在聚合物元素中起作用。因此，您需要创建一个聚合物元素(例如声卡收集)，并将代码从index.html移动到该元素：

元素/声卡-collection.html tion.html

<polymer-element name="sound-card-collection">
  <template>
    <div class="card-container" layout horizontal wrap>
    <template repeat="{{s in carddata}}">
      <sound-card>
        <img src="{{s.imgurl}}">
        <span>{{s.quote}}</span>
      </sound-card>
    </template>
  </template>
  <script>
  Polymer({
     ready: function() {
       this.carddata = [
           {imgurl: '../www/img/soundcard-imgs/img1.jpg', quote: 'String one', sound: '../www/card-sounds/sound1.m4a'},
           {imgurl: '../www/img/soundcard-imgs/img2.jpg', quote: 'String two', sound: '../www/card-sounds/sound2.m4a'}
       ];
   }
  });
  </script>
</polmer-element>

index.html:头部：

<link rel="import" href="elements/sound-card-collection.html">

身体的某处：

<sound-card-collection></sound-card-collection>