robrez/dynamic-muti-template.html

## dynamic-muti-template.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Polymer Element Test Case</title>
  <base href="//polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <dom-module id="x-template">
    <script>
      Polymer({
        is: 'x-template',
        behaviors: [
          Polymer.Templatizer
        ],
        setMarkup: function(markup) {
          var t = document.createElement("template");
          var d = document.createElement("div");
          d.innerHTML = markup;
          t.content.appendChild(d);
          this.templatize(t);
        }
      });
    </script>
  </dom-module>
  <dom-module id="x-foo">
    <template>
      <button on-tap="_handleTapA">create A</button>
      <button on-tap="_handleTapB">create B</button>
      <div id="content"></div>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        properties: {
          myTemplates: {
            type: Object,
            value: function() {
              return {};
            }
          },
          modelA: {
            type: Number,
            value: 0
          },
          bCounter: {
            type: Number,
            value: 0
          },
          colors: {
            type: Array,
            value: function() {
              return 'red,green,blue,yellow'.split(',');
            }
          }
        },

        ready: function() {
          this._registerTemplate("a", "<div>test A {{count}}</div>");
          this._registerTemplate("b", "<div>test B {{color}} [[count]]</div>");
        },
        _registerTemplate: function(name, innerHtml) {
          var t = document.createElement("x-template");
          t.id = name;
          t.setMarkup(innerHtml);
          this.myTemplates[name] = t;
        },
        _handleTapA: function() {
          var n = this.myTemplates.a.stamp({count: ++this.modelA});
          Polymer.dom(this.$.content).appendChild(n.root);
        },
        _handleTapB: function() {
          var color = this.colors[Math.floor(Math.random()*this.colors.length)];
          var n = this.myTemplates.b.stamp({color: color, count: ++this.bCounter});
          Polymer.dom(this.$.content).appendChild(n.root);
        }
      })
    </script>
  </dom-module>
</head>
<body>
  <x-foo></x-foo>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Polymer Element Test Case</title>
	<base href="//polygit.org/components/">
	<script src="webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="polymer/polymer.html">
	<dom-module id="x-template">
	<script>
	Polymer({
	is: 'x-template',
	behaviors: [
	Polymer.Templatizer
	],
	setMarkup: function(markup) {
	var t = document.createElement("template");
	var d = document.createElement("div");
	d.innerHTML = markup;
	t.content.appendChild(d);
	this.templatize(t);
	}
	});
	</script>
	</dom-module>
	<dom-module id="x-foo">
	<template>
	<button on-tap="_handleTapA">create A</button>
	<button on-tap="_handleTapB">create B</button>
	<div id="content"></div>
	</template>
	<script>
	Polymer({
	is: 'x-foo',
	properties: {
	myTemplates: {
	type: Object,
	value: function() {
	return {};
	}
	},
	modelA: {
	type: Number,
	value: 0
	},
	bCounter: {
	type: Number,
	value: 0
	},
	colors: {
	type: Array,
	value: function() {
	return 'red,green,blue,yellow'.split(',');
	}
	}
	},

	ready: function() {
	this._registerTemplate("a", "<div>test A {{count}}</div>");
	this._registerTemplate("b", "<div>test B {{color}} [[count]]</div>");
	},
	_registerTemplate: function(name, innerHtml) {
	var t = document.createElement("x-template");
	t.id = name;
	t.setMarkup(innerHtml);
	this.myTemplates[name] = t;
	},
	_handleTapA: function() {
	var n = this.myTemplates.a.stamp({count: ++this.modelA});
	Polymer.dom(this.$.content).appendChild(n.root);
	},
	_handleTapB: function() {
	var color = this.colors[Math.floor(Math.random()*this.colors.length)];
	var n = this.myTemplates.b.stamp({color: color, count: ++this.bCounter});
	Polymer.dom(this.$.content).appendChild(n.root);
	}
	})
	</script>
	</dom-module>
	</head>
	<body>
	<x-foo></x-foo>
	</body>
	</html>