CODEWITHSUNDEEP
polymer
Flying Emu
Flying Emu

Reputation: 430

Polymer: Template repeat array within of array

I have an element which looks like this:

<polymer-element name="page-slides">
  <template>
    <template repeat="{{row in slideContainer}}">
      <ul class="slide-container">
        <template repeat="slide in row">
          <li class="slide">{{slide.foo}}</li>
        </template>
      </ul>
    </template>
  </template>
  <script>
    Polymer('page-slides', {
      ready: function() {
        this.slideContainer = [];
        for (i = 0; i < 2; i++) {
          this.slideContainer.push([]);
          for (j = 0; j < 2; j++) {
            this.slideContainer[i].push({foo: "foo", bar: "bar"});
          }
        }
      }
    });
  </script>
</polymer-element>

So basically I have an array within of an array, and I'm trying to generate a new ul for every array within of slideContainer, and a new li for every set of properties within of the array.

This isn't working though, I can access the information inside of the array by replacing the template with this so I know that data is there:

    <template repeat="{{row in slideContainer}}">
      <ul class="slide-container">>
        <li class="slide">{{row[0].foo}}</li>
      </ul>
    </template>

What am I doing wrong?

Upvotes: 0

Views: 97

Answers (1)

ebidel
ebidel

Reputation: 24109

You're missing {{}} around the repeat:

<template repeat="{{slide in row}}">

Upvotes: 2

Related Questions