CODEWITHSUNDEEP
javascriptpolymer
Peter Horne
Peter Horne

Reputation: 6846

Polymer template repeat not working

I've created a custom element and setting the repeat attribute on the root template doesn't seem to have any effect.

<link rel="import" href="/components/polymer/polymer.html">
<polymer-element name="cr-tracks">
    <template repeat="{{track in tracks}}">
        {{foo}}
        {{track.title}}
    </template>

    <style>

    </style>

    <script>
        Polymer('cr-tracks', {
            ready: function() {
                this.tracks = [
                    {
                        title: "Example Title",
                        artist: "Example Artist"
                    }
                ];
            },
            foo: 'bar'
        })
    </script>
</polymer-element>

bar, the value of foo is displayed, but nothing is rendered for track.title. I can access it directly via tracks[0].title.

Upvotes: 2

Views: 1029

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

You are missing the special outer template. Polymer sets up the outer template by setting the model to be the element instance itself.

Try this:

<polymer-element name="cr-tracks">
  <template>

    <template repeat="{{track in tracks}}">
      {{foo}}
      {{track.title}}
    </template>

    <style>
    </style>

  </template>
  <script>
    ...
  </script>
</polymer-element>

Upvotes: 4

Related Questions