CODEWITHSUNDEEP
data-bindingpolymer
shan
shan

Reputation: 3145

Template not repeating?

I have an array with a bunch of data that I need to bind to different parts of a custom element that I created. Here's the relevant bit of that element:

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

And in my index.html file I attempt to repeat it like so:

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

My array is rather large, but here's the condensed version (its in my index.html file):

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

Am I getting something fundamentally wrong? I thought that {{s in carddata}} would repeat the <sound-card> custom element for however many items were in the carddata array? I used the beginner example on the Polymer site but when I run it on my http server the template is never moving away from display: none. Any ideas? Or examples, or anything! Thanks!

Upvotes: 0

Views: 31

Answers (1)

Luc Hendriks
Luc Hendriks

Reputation: 2533

That only works in a Polymer element. So you need to create a Polymer element (e.g. sound-card-collection) and move the code from index.html to that element:

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: In the head:

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

Somewhere in the body:

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

Upvotes: 2

Related Questions