rubenstolk/polymer-dom-repeat-item-conflict.html

## polymer-dom-repeat-item-conflict.html
<html>
  <head>
    <base href="http://polygit.org/polymer+v1.9.1/components/">

    <link href="iron-icons/iron-icons.html" rel="import">
    <link href="iron-icons/av-icons.html" rel="import">
    <link href="paper-icon-button/paper-icon-button.html" rel="import">
    <link href="paper-checkbox/paper-checkbox.html" rel="import">

    <link rel="import" href="iron-pages/iron-pages.html">

    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  </head>

  <body>

    <dom-module id="loop-example">
      <template>
        <style>
          iron-pages > div {
            height: 300px;
            width: 600px;
            @apply(--layout-vertical);
          }
        </style>
        <div>
          <iron-pages selected="[[selection]]">
            <template is="dom-repeat" items="[[items]]" as="master">
              <div>
                <template is="dom-if" if="[[eq(selection, index)]]">
                  <template is="dom-repeat" items="[[master.items]]">
                    <loop-item master="[[master.index]]" index="[[item.index]]"></loop-item>
                  </template>
                </template>
              </div>
            </template>
          </iron-pages>
          <br>
          <paper-icon-button icon="av:replay" raised on-tap="reset"></paper-icon-button>
          <paper-icon-button icon="chevron-left" raised on-tap="prev"></paper-icon-button>
          <paper-icon-button icon="chevron-right" raised on-tap="next"></paper-icon-button>
          <paper-icon-button icon="av:play-arrow" raised on-tap="play"></paper-icon-button>
          <paper-checkbox checked="{{checked}}">Use "element.item"</paper-checkbox>
          <br>
          Throughput: [[throughput]]ms
        </div>

      </template>
      <script>
        Polymer({
          is: 'loop-example',
          properties: {
            delay: {
              type: Number,
              value: 1
            },
            selection: {
              type: Number,
              value: 0
            },
            throughput: {
              type: Number,
              value: 0
            },
            checked: {
              type: Boolean,
              value: true
            },
            item: {
              type: Object,
            },
            itemWithDifferentName: {
              type: Object,
            },
            items: {
              type: Array,
              value: () => Array.from(Array(1000), (_, index) => ({
                index,
                items: Array.from(Array(3), (_, index) => ({ index }))
              }))
            }
          },
          observers: [
            'update(selection)'
          ],
          eq (a, b) {
            return a === b;
          },
          next () {
            if (this.selection >= this.items.length - 1) {
              return false;
            }

            this.set('selection', Math.min(this.items.length - 1, this.selection + 1));
            return true;
          },
          prev () {
            this.set('selection', Math.max(0, this.selection - 1));
          },
          play () {
            if (this._profile) {
              this.reset();
            }

            this._profile = { count: 0, total: 0 };
            this.update();
          },
          reset () {
            delete this._profile;
            this.set('selection', 0);
          },
          update () {
            this.async(() => {
              if (!this._profile) {
                return;
              }

              const itemKey = this.checked ? 'item' : 'itemWithDifferentName';
              this.set(itemKey, this.items[this.selection]);

              if (this._profile._date) {
                this._profile.count++;
                this._profile.last = new Date() - this._profile._date - this.delay;
                this._profile.total += this._profile.last;
                this._profile.average = this._profile.total / this._profile.count;
                this.set('throughput', this._profile.average);
                console.info(`${this._profile.last}ms (average: ${this._profile.average}ms)`);
              }

              this._profile._date = new Date();

              if (!this.next()) {
                console.info(`
                  Done profiling.
                  ==

                  Moved through ${this._profile.count} items.
                  Update time was ${this._profile.average}ms on average.
                `);
              }
            }, this.delay);
          }
        });
      </script>
    </dom-module>
    <dom-module id="loop-item">
      <template>
        <style>
          :host {
            @apply(--layout-flex);
            @apply(--layout-center-center);
            display: inline-flex;
            border-style: solid;
            border-color: red;
            border-width: 1px 1px 0 1px;
          }
          :host(:last-of-type) {
            border-width: 1px;
          }
        </style>
        <div>[[master]]: [[index]]</div>
      </template>
      <script>
        Polymer({
          is: 'loop-item',
          properties: {
            index: {
              type: Number,
              value: 0
            },
            master: {
              type: Number,
              value: 0
            }
          }
        });
      </script>
    </dom-module>
    <loop-example></loop-example>
  </body>
</html>
	<html>
	<head>
	<base href="http://polygit.org/polymer+v1.9.1/components/">

	<link href="iron-icons/iron-icons.html" rel="import">
	<link href="iron-icons/av-icons.html" rel="import">
	<link href="paper-icon-button/paper-icon-button.html" rel="import">
	<link href="paper-checkbox/paper-checkbox.html" rel="import">

	<link rel="import" href="iron-pages/iron-pages.html">

	<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
	</head>

	<body>

	<dom-module id="loop-example">
	<template>
	<style>
	iron-pages > div {
	height: 300px;
	width: 600px;
	@apply(--layout-vertical);
	}
	</style>
	<div>
	<iron-pages selected="[[selection]]">
	<template is="dom-repeat" items="[[items]]" as="master">
	<div>
	<template is="dom-if" if="[[eq(selection, index)]]">
	<template is="dom-repeat" items="[[master.items]]">
	<loop-item master="[[master.index]]" index="[[item.index]]"></loop-item>
	</template>
	</template>
	</div>
	</template>
	</iron-pages>
	<br>
	<paper-icon-button icon="av:replay" raised on-tap="reset"></paper-icon-button>
	<paper-icon-button icon="chevron-left" raised on-tap="prev"></paper-icon-button>
	<paper-icon-button icon="chevron-right" raised on-tap="next"></paper-icon-button>
	<paper-icon-button icon="av:play-arrow" raised on-tap="play"></paper-icon-button>
	<paper-checkbox checked="{{checked}}">Use "element.item"</paper-checkbox>
	<br>
	Throughput: [[throughput]]ms
	</div>

	</template>
	<script>
	Polymer({
	is: 'loop-example',
	properties: {
	delay: {
	type: Number,
	value: 1
	},
	selection: {
	type: Number,
	value: 0
	},
	throughput: {
	type: Number,
	value: 0
	},
	checked: {
	type: Boolean,
	value: true
	},
	item: {
	type: Object,
	},
	itemWithDifferentName: {
	type: Object,
	},
	items: {
	type: Array,
	value: () => Array.from(Array(1000), (_, index) => ({
	index,
	items: Array.from(Array(3), (_, index) => ({ index }))
	}))
	}
	},
	observers: [
	'update(selection)'
	],
	eq (a, b) {
	return a === b;
	},
	next () {
	if (this.selection >= this.items.length - 1) {
	return false;
	}

	this.set('selection', Math.min(this.items.length - 1, this.selection + 1));
	return true;
	},
	prev () {
	this.set('selection', Math.max(0, this.selection - 1));
	},
	play () {
	if (this._profile) {
	this.reset();
	}

	this._profile = { count: 0, total: 0 };
	this.update();
	},
	reset () {
	delete this._profile;
	this.set('selection', 0);
	},
	update () {
	this.async(() => {
	if (!this._profile) {
	return;
	}

	const itemKey = this.checked ? 'item' : 'itemWithDifferentName';
	this.set(itemKey, this.items[this.selection]);

	if (this._profile._date) {
	this._profile.count++;
	this._profile.last = new Date() - this._profile._date - this.delay;
	this._profile.total += this._profile.last;
	this._profile.average = this._profile.total / this._profile.count;
	this.set('throughput', this._profile.average);
	console.info(`${this._profile.last}ms (average: ${this._profile.average}ms)`);
	}

	this._profile._date = new Date();

	if (!this.next()) {
	console.info(`
	Done profiling.
	==

	Moved through ${this._profile.count} items.
	Update time was ${this._profile.average}ms on average.
	`);
	}
	}, this.delay);
	}
	});
	</script>
	</dom-module>
	<dom-module id="loop-item">
	<template>
	<style>
	:host {
	@apply(--layout-flex);
	@apply(--layout-center-center);
	display: inline-flex;
	border-style: solid;
	border-color: red;
	border-width: 1px 1px 0 1px;
	}
	:host(:last-of-type) {
	border-width: 1px;
	}
	</style>
	<div>[[master]]: [[index]]</div>
	</template>
	<script>
	Polymer({
	is: 'loop-item',
	properties: {
	index: {
	type: Number,
	value: 0
	},
	master: {
	type: Number,
	value: 0
	}
	}
	});
	</script>
	</dom-module>
	<loop-example></loop-example>
	</body>
	</html>