模板不重复？

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}} 会为 carddata 数组中的许多项目重复 <sound-card> 自定义元素？我在 Polymer 站点上使用了初学者示例，但是当我在我的 http 服务器上运行时，模板永远不会离开 display: none。有任何想法吗？或例子，或任何东西！谢谢！

Answer 1

这仅适用于 Polymer 元素。因此，您需要创建一个 Polymer 元素（例如 sound-card-collection）并将代码从 index.html 移动到该元素：

elements/sound-card-collection.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">

body 中的某处：

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

模板不重复？

Template not repeating?

data-binding

polymer