Fügen Sie ein "dynamisches" Element mit Datenbindung zu meinem Polymer-Element hinzu

Question

Seit Tagen versuche ich, Polymer mit einigen "dynamischen" Elementen zu füttern :) Leider ohne Erfolg ... Mein Ziel ist es, ein Element zur Laufzeit hinzugefügt und füllen sie ihn mit Inhalt von Polymer-Datenbindung (in einem „natürlichen“ Polymer-Weg. Ohne dieses Problem zu umgehen, wie in einer anderen stackoverflow answer vorgeschlagen.)

Bitte werfen sie einen Blick auf dem Code in dieser Geige (https://jsfiddle.net/mkappeller/ken9Lzc7/) oder bei der Grund dieser Frage. Ich hoffe wirklich, dass jemand da draußen mir helfen kann. Es würde auch helfen zu wissen, ob es einen Weg gibt, dies irgendwann in der Zukunft zu tun ...?

---

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

Ich habe es fast von Polymer.Templatizer Verhalten verwenden. Leider scheint es, dass es einen Fehler oder einen Fehler gibt, der verhindert, dass Updates von Eltern auf die dynamisch erstellte Vorlage angewendet werden. Ich werde ein Problem auf GitHub ansprechen.

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

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

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