polymer/test/unit/x-repeat-elements.html

<script>
window.data = [
  {
    prop: 'prop-1',
    items: [
      {
        prop: 'prop-1-1',
        items: [
          { prop: 'prop-1-1-1' },
          { prop: 'prop-1-1-2' },
          { prop: 'prop-1-1-3' }
        ]
      },
      {
        prop: 'prop-1-2',
        items: [
          { prop: 'prop-1-1-1' },
          { prop: 'prop-1-1-2' },
          { prop: 'prop-1-1-3' }
        ]
      },
      {
        prop: 'prop-1-3',
        items: [
          { prop: 'prop-1-1-1' },
          { prop: 'prop-1-1-2' },
          { prop: 'prop-1-1-3' }
        ]
      },
    ]
  },
  {
    prop: 'prop-2',
    items: [
      {
        prop: 'prop-2-1',
        items: [
          { prop: 'prop-2-1-1' },
          { prop: 'prop-2-1-2' },
          { prop: 'prop-2-1-3' }
        ]
      },
      {
        prop: 'prop-2-2',
        items: [
          { prop: 'prop-2-2-1' },
          { prop: 'prop-2-2-2' },
          { prop: 'prop-2-2-3' }
        ]
      },
      {
        prop: 'prop-2-3',
        items: [
          { prop: 'prop-2-3-1' },
          { prop: 'prop-2-3-2' },
          { prop: 'prop-2-3-3' }
        ]
      },
    ]
  },
  {
    prop: 'prop-3',
    items: [
      {
        prop: 'prop-3-1',
        items: [
          { prop: 'prop-3-1-1' },
          { prop: 'prop-3-1-2' },
          { prop: 'prop-3-1-3' }
        ]
      },
      {
        prop: 'prop-3-2',
        items: [
          { prop: 'prop-3-2-1' },
          { prop: 'prop-3-2-2' },
          { prop: 'prop-3-2-3' }
        ]
      },
      {
        prop: 'prop-3-3',
        items: [
          { prop: 'prop-3-3-1' },
          { prop: 'prop-3-3-2' },
          { prop: 'prop-3-3-3' }
        ]
      },
    ]
  }
];
</script>

<dom-module id="x-foo">
  <template>
    <x-bar id="bar"
          prop="{{prop}}"
           item-prop="{{itemProp}}"
           parent-prop="{{parentProp}}"
           parent-item-prop="{{parentItemProp}}"
           parent-parent-prop="{{parentParentProp}}"
           parent-parent-item-prop="{{parentParentItemProp}}"
           parent-parent-parent-prop="{{parentParentParentProp}}"
           parent-parent-parent-item-prop="{{parentParentParentItemProp}}">
    </x-bar>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-foo',
    properties: {
      prop: {
        notify: true
      },
      itemProp: {
        notify: true
      },
      parentProp: {
        notify: true,
      },
      parentItemProp: {
        notify: true
      },
      parentParentProp: {
        notify: true,
      },
      parentParentItemProp: {
        notify: true
      },
      parentParentParentProp: {
        notify: true,
      },
      parentParentParentItemProp: {
        notify: true
      }
    }
  });
  Polymer({
    is: 'x-bar',
    properties: {
      prop: {
        notify: true
      },
      itemProp: {
        notify: true
      },
      parentProp: {
        notify: true,
      },
      parentItemProp: {
        notify: true
      },
      parentParentProp: {
        notify: true,
      },
      parentParentItemProp: {
        notify: true
      },
      parentParentParentProp: {
        notify: true,
      },
      parentParentParentItemProp: {
        notify: true
      }
    }
  });
</script>

<dom-module id="x-nested-repeat">
  <template>
    <template id="repeater" is="x-repeat" items="{{items}}">
      <x-foo on-test1="testHandler1"
             prop="{{prop}}"
             item-prop="{{item.prop}}"
             parent-prop="{{parent.prop}}"
             parent-item-prop="{{parent.item.prop}}">
      </x-foo>
      <template is="x-repeat" items="{{item.items}}">
        <x-foo on-test2="testHandler2"
               prop="{{prop}}"
               item-prop="{{item.prop}}"
               parent-prop="{{parent.prop}}"
               parent-item-prop="{{parent.item.prop}}"
               parent-parent-prop="{{parent.parent.prop}}"
               parent-parent-item-prop="{{parent.parent.item.prop}}">
        </x-foo>
        <template is="x-repeat" items="{{item.items}}">
          <x-foo on-test3="testHandler3"
                 prop="{{prop}}"
                 item-prop="{{item.prop}}"
                 parent-prop="{{parent.prop}}"
                 parent-item-prop="{{parent.item.prop}}"
                 parent-parent-prop="{{parent.parent.prop}}"
                 parent-parent-item-prop="{{parent.parent.item.prop}}"
                 parent-parent-parent-prop="{{parent.parent.parent.prop}}"
                 parent-parent-parent-item-prop="{{parent.parent.parent.item.prop}}">
          </x-foo>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-nested-repeat',
    testHandler1Count: 0,
    testHandler2Count: 0,
    testHandler3Count: 0,
    testHandler1: function() {
      this.testHandler1Count++;
    },
    testHandler2: function() {
      this.testHandler2Count++;
    },
    testHandler3: function() {
      this.testHandler3Count++;
    }
  });
</script>

<dom-module id="x-nested-repeat-configured">
  <template>
    <template id="repeater" is="x-repeat" items="{{items}}">
      <x-foo prop="{{prop}}"
             item-prop="{{item.prop}}"
             parent-prop="{{parent.prop}}"
             parent-item-prop="{{parent.item.prop}}">
      </x-foo>
      <template is="x-repeat" items="{{item.items}}">
        <x-foo prop="{{prop}}"
               item-prop="{{item.prop}}"
               parent-prop="{{parent.prop}}"
               parent-item-prop="{{parent.item.prop}}"
               parent-parent-prop="{{parent.parent.prop}}"
               parent-parent-item-prop="{{parent.parent.item.prop}}">
        </x-foo>
        <template is="x-repeat" items="{{item.items}}">
          <x-foo prop="{{prop}}"
                 item-prop="{{item.prop}}"
                 parent-prop="{{parent.prop}}"
                 parent-item-prop="{{parent.item.prop}}"
                 parent-parent-prop="{{parent.parent.prop}}"
                 parent-parent-item-prop="{{parent.parent.item.prop}}"
                 parent-parent-parent-prop="{{parent.parent.parent.prop}}"
                 parent-parent-parent-item-prop="{{parent.parent.parent.item.prop}}">
          </x-foo>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-nested-repeat-configured',
    properties: {
      items: {
        value: window.data
      },
      prop: {
        value: 'outer',
      },
      item: {
        value: function() { return {prop: 'outerItem'}; }
      }
    }
  });
</script>