データバインディング付きの「動的」要素をポリマー要素に追加する

Question

ポリマー用にいくつかの「動的」要素をフィードすることを試みました:)残念ながら、成功なし... 私の目標は、ランタイム中に要素を追加することです（天然ポリマーの方法でポリマーのデータバインディングで内容を記入してください。別のstackoverflow answerで提案された回避策なし）

このフィドル（https://jsfiddle.net/mkappeller/ken9Lzc7/）のコードを見てください。この質問の底。 本当に私を助けてくれる人がいることを願っています。 将来これを行う方法があるかどうかを知るのに役立ちます... ...？

Answer 1

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>

---

私はほとんど 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> 
 
\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>