Add A "dynamic" Element With Data-binding To My Polymer-element

For days I try to feed Polymer with some 'dynamic' elements :) Unfortunately without success... My goal is to get an element added during runtime and fill it with content by polyme

Solution 1:

I've almost got it by using Polymer.Templatizer behaviour. Unfortunately it seems that there is some bug or my mistake which prevents updates from parent from being applied to the dynamically created template. I'll raise an issue on GitHub.

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-input/paper-input.html">

<dom-module id="my-app">
  <template>
	<paper-input label="global.text" value="{{global.text}}"></paper-input>
	<paper-button raised id="addHeadline" on-tap="addHeadline">Add Headline</paper-button>
	<paper-button raised id="changeText" on-tap="click">Change Text</paper-button>
	<p>global.text: &lt;{{global.text}}&gt;</p>
	
	<template if="true" is="dom-if">
	  <div>      
		dom-if: <input type="text" value="{{global.text::input}}" />
	  </div>
	</template>
  </template>
  <script>
	Polymer({
	  is: "my-app",
	  behaviors: [ Polymer.Templatizer ],
	  properties: {
		global: {
		  value: { text:'i' },
		  notify: true
		}
	  },
	  ready: function() {
		this.count = 0;
		
        // this ensures that global.text is updated when text changes
		this._instanceProps = {
			text: true
		};
	  },
	  addHeadline: function() {
		
		this.template = document.createElement("template");
		var templateRoot = document.createElement('div');
		templateRoot.innerHTML = `<h1>{{text.text}}</h1><input type="text" value="{{text.text::input}}" />`;
        // you cannot just set innerHTML in <template>
		this.template.content.appendChild(templateRoot);
		
		this.templatize(this.template);
		var clone = this.stamp({
		  text: this.global
		});

		// Append to my-app
		Polymer.dom(this.root).appendChild(clone.root);
	  },
	  click: function() {
		this.set("global.text", "count-" + this.count++);
	  },
	  _forwardInstanceProp: function(inst, p, val) {
		debugger;
	  },
	  _forwardInstancePath: function(inst, p, val) {
        // notify parent's correct path when text.text changes
		this.set(p.replace(/^text/, 'global'), val);
	  },
	  _forwardParentProp: function(prop, value) {
		debugger;
	  },
	  _forwardParentPath: function(prop, value) {
		debugger;
	  }
	});

  </script>
</dom-module>
<my-app></my-app>