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>自定义元素，因为carddata数组中有很多项？我在Polymer网站上使用了初学者示例，但是当我在我的http服务器上运行它时，模板永远不会离开display: none。有任何想法吗？或者例子，或者其他什么！谢谢！

Answer 1

仅适用于Polymer元素。因此，您需要创建一个Polymer元素（例如声卡集合）并将代码从index.html移动到该元素：

元素/声卡-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">

身体某处：

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

模板不重复？

1 个答案: