montrealist · June 26, 2017 14:12
diff --git a/ddc-tabs.html b/ddc-tabs.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="nesting Polymer elements and dynamic content inside dom-repeat">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <base href="http://polygit.org/polymer+:1.x/components/" />
  <link href="polymer/polymer.html" rel="import" />
 </head>
 <body>
  
  <dom-module id="ddc-grid-selector">
    <template>
      <section>
        <content></content>
      </section>
    </template>
    <script>
      Polymer({
        is: 'ddc-grid-selector',
        properties: {
          regions: {
            type: Array,
            notify: true,
            observer: '_onRegionsLoad'
          }
        },
        _onRegionsLoad: function(newv, oldv) {
          console.log('_onRegionsLoad fired:', newv);
        }
      });
    </script>
  </dom-module>

  <dom-module id="ddc-tabs">
  <template>
    <ul class="tab-list" id="tabLinks" role="tablist">
      <template is="dom-repeat" id="tabLinksTemplate" items="{{collection}}" as="tabItem" index-as="item_no">
        <li 
            class="tab-item" 
            role="presentation">
          <a 
             id="tab-link-[[item_no]]" 
             role="tab" 
             class="tab-link" 
             aria-controls="{{item_no}}"
             href="#{{item_no}}"
             on-tap="_onTabClick"
             on-focus="_onTabFocus"
             on-keydown="_onTabKeydown"
             data-index$="{{item_no}}"
             >{{item_no}}</a>
        </li>
      </template>
    </ul>
    <ul>
      <content></content>
      <template is="dom-repeat" id="repeater" items="[[collection]]"></template>
    </ul>
    </template>

    <script>
      Polymer({
        is: 'ddc-tabs',
        properties: {
          collection: {
            type: Array,
            notify: true
          }
        },
        ready() {
          this.$.repeater.templatize(this.querySelector('#foobar'));
          Polymer.Bind.prepareModel(this.$.repeater);
          Polymer.Base.prepareModelNotifyPath(this.$.repeater);
        }
      });
    </script>
  </dom-module>
  
  <dom-module is="ddc-region-selector">
    <template>
      
      <ddc-tabs collection="[[myItems]]">
        <template id="foobar">
        <li><span>[[item.id]]</span>: <span>[[item.content]]</span><ddc-grid-selector regions="[[item.regions]]"></ddc-grid-selector></li>
        </template>
      </ddc-tabs>
      <button on-tap="_onButtonClick">add new item</button>
    </template>
    <script>
      Polymer({
        is: 'ddc-region-selector',
        ready: function() {
          this.myItems = [
            { id: 1, content: "First tab", regions: [1,2,3] },
            { id: 2, content: "Second tab", regions: ['a','b','c'] },
            { id: 3, content: "Third tab", regions: ['x','y','z'] },
          ];
        },

        _getMaxId: function() {
          return this.myItems.map(el => el.id).reduce((max, cur) => Math.max(max, cur), -Infinity);
        },
        _onButtonClick: function(){
          const maxId = this._getMaxId();
          this.push('myItems', { id: maxId + 1, content: 'yet another tab', regions: [maxId+2, maxId+3, maxId+4] });
        }
      });
    </script>
  </dom-module>

  <ddc-region-selector></ddc-region-selector>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="nesting Polymer elements and dynamic content inside dom-repeat">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>

	<base href="http://polygit.org/polymer+:1.x/components/" />
	<link href="polymer/polymer.html" rel="import" />
	</head>
	<body>

	<dom-module id="ddc-grid-selector">
	<template>
	<section>
	<content></content>
	</section>
	</template>
	<script>
	Polymer({
	is: 'ddc-grid-selector',
	properties: {
	regions: {
	type: Array,
	notify: true,
	observer: '_onRegionsLoad'
	}
	},
	_onRegionsLoad: function(newv, oldv) {
	console.log('_onRegionsLoad fired:', newv);
	}
	});
	</script>
	</dom-module>

	<dom-module id="ddc-tabs">
	<template>
	<ul class="tab-list" id="tabLinks" role="tablist">
	<template is="dom-repeat" id="tabLinksTemplate" items="{{collection}}" as="tabItem" index-as="item_no">
	<li
	class="tab-item"
	role="presentation">
	<a
	id="tab-link-[[item_no]]"
	role="tab"
	class="tab-link"
	aria-controls="{{item_no}}"
	href="#{{item_no}}"
	on-tap="_onTabClick"
	on-focus="_onTabFocus"
	on-keydown="_onTabKeydown"
	data-index$="{{item_no}}"
	>{{item_no}}</a>
	</li>
	</template>
	</ul>
	<ul>
	<content></content>
	<template is="dom-repeat" id="repeater" items="[[collection]]"></template>
	</ul>
	</template>

	<script>
	Polymer({
	is: 'ddc-tabs',
	properties: {
	collection: {
	type: Array,
	notify: true
	}
	},
	ready() {
	this.$.repeater.templatize(this.querySelector('#foobar'));
	Polymer.Bind.prepareModel(this.$.repeater);
	Polymer.Base.prepareModelNotifyPath(this.$.repeater);
	}
	});
	</script>
	</dom-module>

	<dom-module is="ddc-region-selector">
	<template>

	<ddc-tabs collection="[[myItems]]">
	<template id="foobar">
	<li><span>[[item.id]]</span>: <span>[[item.content]]</span><ddc-grid-selector regions="[[item.regions]]"></ddc-grid-selector></li>
	</template>
	</ddc-tabs>
	<button on-tap="_onButtonClick">add new item</button>
	</template>
	<script>
	Polymer({
	is: 'ddc-region-selector',
	ready: function() {
	this.myItems = [
	{ id: 1, content: "First tab", regions: [1,2,3] },
	{ id: 2, content: "Second tab", regions: ['a','b','c'] },
	{ id: 3, content: "Third tab", regions: ['x','y','z'] },
	];
	},

	_getMaxId: function() {
	return this.myItems.map(el => el.id).reduce((max, cur) => Math.max(max, cur), -Infinity);
	},
	_onButtonClick: function(){
	const maxId = this._getMaxId();
	this.push('myItems', { id: maxId + 1, content: 'yet another tab', regions: [maxId+2, maxId+3, maxId+4] });
	}
	});
	</script>
	</dom-module>

	<ddc-region-selector></ddc-region-selector>
	</body>
	</html>