dom-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-2-1' },
          { prop: 'prop-1-2-2' },
          { prop: 'prop-1-2-3' }
        ]
      },
      {
        prop: 'prop-1-3',
        items: [
          { prop: 'prop-1-3-1' },
          { prop: 'prop-1-3-2' },
          { prop: 'prop-1-3-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">
  <style>
    :host {
      display: block;
      border: 1px solid black;
      padding: 3px;
      margin: 3px;
    }
  </style>
  <template>
    <span>{{itemcProp}}</span>
    <span>{{itembProp}}</span>
    <span>{{itemaProp}}</span>
    <x-bar id="bar"
           outer-prop="{{outerProp}}"
           outer-item-prop="{{outerItemProp}}"
           innera-prop="{{inneraProp}}"
           itema-prop="{{itemaProp}}"
           innerb-prop="{{innerbProp}}"
           itemb-prop="{{itembProp}}"
           innerc-prop="{{innercProp}}"
           itemc-prop="{{itemcProp}}"
           computed1="{{computed1}}"
           computed2="{{computed2}}"
           computed3="{{computed3}}">
    </x-bar>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-foo',
    properties: {
      outerProp: {
        notify: true
      },
      outerItemProp: {
        notify: true
      },
      inneraProp: {
        notify: true,
      },
      itemaProp: {
        notify: true
      },
      innerbProp: {
        notify: true,
      },
      itembProp: {
        notify: true
      },
      innercProp: {
        notify: true,
      },
      itemcProp: {
        notify: true
      },
      indexa: {
        notify: true
      },
      indexb: {
        notify: true
      },
      indexc: {
        notify: true
      }
    }
  });
  Polymer({
    is: 'x-bar',
    properties: {
      outerProp: {
        notify: true
      },
      outerItemProp: {
        notify: true
      },
      inneraProp: {
        notify: true,
      },
      itemaProp: {
        notify: true
      },
      innerbProp: {
        notify: true,
      },
      itembProp: {
        notify: true
      },
      innercProp: {
        notify: true,
      },
      itemcProp: {
        notify: true
      },
      indexa: {
        notify: true
      },
      indexb: {
        notify: true
      },
      indexc: {
        notify: true
      }
    }
  });
</script>

<dom-module id="x-nested-repeat">
  <template>
    <template id="repeater" is="dom-repeat" items="{{items}}" as="itema" index-as="indexa" on-dom-change="domUpdateHandler">
      <x-foo on-test1="testHandler1"
             innera-prop="{{innera.prop}}"
             itema-prop="{{itema.prop}}"
             outer-prop="{{prop}}"
             outer-item-prop="{{item.prop}}"
             indexa="{{indexa}}">
      </x-foo>
      <template is="dom-repeat" items="{{itema.items}}" as="itemb" index-as="indexb">
        <x-foo on-test2="testHandler2"
               innerb-prop="{{innerb.prop}}"
               itemb-prop="{{itemb.prop}}"
               innera-prop="{{innera.prop}}"
               itema-prop="{{itema.prop}}"
               outer-prop="{{prop}}"
               outer-item-prop="{{item.prop}}"
               indexa="{{indexa}}"
               indexb="{{indexb}}">
        </x-foo>
        <template is="dom-repeat" items="{{itemb.items}}" as="itemc" index-as="indexc">
          <x-foo on-test3="testHandler3"
                 innerc-prop="{{innerc.prop}}"
                 itemc-prop="{{itemc.prop}}"
                 innerb-prop="{{innerb.prop}}"
                 itemb-prop="{{itemb.prop}}"
                 innera-prop="{{innera.prop}}"
                 itema-prop="{{itema.prop}}"
                 outer-prop="{{prop}}"
                 outer-item-prop="{{item.prop}}"
                 indexa="{{indexa}}"
                 indexb="{{indexb}}"
                 indexc="{{indexc}}">
          </x-foo>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-nested-repeat',
    testHandler1Count: 0,
    testHandler2Count: 0,
    testHandler3Count: 0,
    domUpdateHandlerCount: 0,
    testHandler1: function() {
      this.testHandler1Count++;
    },
    testHandler2: function() {
      this.testHandler2Count++;
    },
    testHandler3: function() {
      this.testHandler3Count++;
    },
    domUpdateHandler: function() {
      this.domUpdateHandlerCount++;
    }
  });
</script>

<dom-module id="x-nested-repeat-configured">
  <template>
    <template id="repeater" is="dom-repeat" items="{{items}}" as="itema" index-as="indexa"observe="prop">
      <x-foo
             innera-prop="{{innera.prop}}"
             itema-prop="{{itema.prop}}"
             outer-prop="{{prop}}"
             outer-item-prop="{{item.prop}}"
             indexa="{{indexa}}"
             computeda="{{concat(itema.prop, itemForComputedA.prop)}}">
      </x-foo>
      <template is="dom-repeat" items="{{itema.items}}" as="itemb" index-as="indexb">
        <x-foo
               innerb-prop="{{innerb.prop}}"
               itemb-prop="{{itemb.prop}}"
               innera-prop="{{innera.prop}}"
               itema-prop="{{itema.prop}}"
               outer-prop="{{prop}}"
               outer-item-prop="{{item.prop}}"
               indexa="{{indexa}}"
               indexb="{{indexb}}"
               computedb="{{concat(itemb.prop, itemForComputedB.prop)}}">
        </x-foo>
        <template is="dom-repeat" items="{{itemb.items}}" as="itemc" index-as="indexc">
          <x-foo
                 innerc-prop="{{innerc.prop}}"
                 itemc-prop="{{itemc.prop}}"
                 innerb-prop="{{innerb.prop}}"
                 itemb-prop="{{itemb.prop}}"
                 innera-prop="{{innera.prop}}"
                 itema-prop="{{itema.prop}}"
                 outer-prop="{{prop}}"
                 outer-item-prop="{{item.prop}}"
                 indexa="{{indexa}}"
                 indexb="{{indexb}}"
                 indexc="{{indexc}}"
                 computedc="{{concat(itemc.prop, itemForComputedC.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'}; }
      },
      itemForComputedA: {
        value: function() { return {prop: 'itemForComputedA'}; }
      },
      itemForComputedB: {
        value: function() { return {prop: 'itemForComputedB'}; }
      },
      itemForComputedC: {
        value: function() { return {prop: 'itemForComputedC'}; }
      },
      _testHost: {
        value: function() { return this; }
      }
    },
    sortDesc: function(a, b) {
      assert.equal(this, this._testHost);
      return b.prop.localeCompare(a.prop);
    },
    filter2nd: function(o) {
      assert.equal(this, this._testHost);
      return o.prop.indexOf('2') < 0;
    },
    concat: function(a, b) {
      return a + '+' + b;
    }
  });
</script>


<dom-module id="x-simple-repeat">
  <template>
    <template is="dom-repeat" items="{{items}}">
      <x-foo itema-prop="{{item.prop}}"></x-foo>
    </template>
  </template>
  <script>
  Polymer({
    is: 'x-simple-repeat',
    properties: {
      items: {
        value: window.data
      }
    }
  });
  </script>
</dom-module>

<dom-module id="x-primitive-repeat">
  <template>
    <div id="container1">
      <template is="dom-repeat" items="{{items}}" id="repeater1">
        <x-foo itema-prop="{{item}}"></x-foo>
      </template>
    </div>
    <div id="container2">
      <template is="dom-repeat" items="{{items}}" id="repeater2">
        <x-foo itema-prop="{{item}}"></x-foo>
      </template>
    </div>
  </template>
  <script>
  Polymer({
    is: 'x-primitive-repeat',
    properties: {
      items: {
        value: function() {
          return ['a', 'b', 'c', 'd', 'e'];
        }
      }
    }
  });
  </script>
</dom-module>

<dom-module id="x-primitive-large">
  <template>
    <template id="repeater" is="dom-repeat" items="{{items}}">
      <div>{{item}}</div>
    </template>
  </template>
  <script>
    Polymer({
      is: 'x-primitive-large',
      properties: {
        items: {
          value: function() {
            var ar = [];
            for (var i = 0; i < 11; i++) {
              ar.push(i);
            }
            return ar;
          }
        }
      }
    });
  </script>
</dom-module>