将具有数据绑定的“动态”元素添加到我的聚合物元素

Question

几天来，我尝试为 Polymer 提供一些“动态”元素 :) 不幸的是没有成功... 我的目标是在运行时添加一个元素，并通过聚合物数据绑定（以“自然”聚合物方式。没有另一个 stackoverflow answer 中建议的解决方法。）

请查看此小提琴 (https://jsfiddle.net/mkappeller/ken9Lzc7/) 或此问题底部的代码。 我真的希望那里的任何人都能够帮助我。 知道将来有一天是否有办法做到这一点也会有所帮助......？

---

window.addEventListener("WebComponentsReady", function() {
  var myAppModule = document.getElementById("my-app");
  var myApp = document.getElementsByTagName("my-app")[0];

  myApp.set("global", {
    text: "Init"
  });
});

<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">Add Headline</paper-button>
    <paper-button raised id="changeText">Change Text</paper-button>
    <p>global.text: &lt;{{global.text}}&gt;</p>
  </template>
  <script>
    Polymer({
      is: "my-app",
      properties: {
        global: {}
      },
      ready: function() {
        this.count = 0;

        this.$.addHeadline.addEventListener("click", () => {

          var myApp = Polymer.dom(document.getElementById("my-app"));

          var t = myApp.node.childNodes[1];

          var heading = document.createElement("h1");
          heading.textContent = "{{global.text}}";

          // Append to my-app
          Polymer.dom(this.root).appendChild(heading);
        });
        this.$.changeText.addEventListener("click", () => {
          this.set("global.text", "count-" + this.count++);
        });
      }
    });
  </script>
</dom-module>
<my-app></my-app>

Answer 1

我几乎通过使用Polymer.Templatizer 行为得到它。不幸的是，似乎有一些错误或我的错误阻止了父级的更新应用于动态创建的模板。我将在 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>