添加＆QUOT;动态＆QUOT;与数据绑定到我的高分子元元 [英] Add a "dynamic" element with data-binding to my polymer-element
本文介绍了添加＆QUOT;动态＆QUOT;与数据绑定到我的高分子元元的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有关日子里，我试图用动态的元素来养活聚合物:)可惜没有成功...
我的目标是在运行过程中会添加一个元素，由聚合物数据绑定（在自然聚合物的方法。如果没有一个解决方法，因为在其他建议<一个与内容填充它href=\"http://stackoverflow.com/questions/30615549/data-binding-in-a-dynamically-inserted-polymer-element\">stackoverflow回答。）
请参加这个小提琴来看看code（ https://jsfiddle.net/mkappeller / ken9Lzc7 / ），或在这个问题的底部。
我真的希望有任何人能帮助我。
这也将有助于知道是否会有办法做到这一点有一天在未来...？
\r
\r\r
\r window.addEventListener（WebComponentsReady功能（）{\r
VAR myAppModule =的document.getElementById（我的应用）;\r
VAR对myApp = document.getElementsByTagName（我的应用）[0];\r
\r
myApp.set（全球性，{\r
文字：初始化\r
}）;\r
}）; \r
＆LT;基地HREF =https://polygit.org/components/ ＆GT;\r
＆所述; SCRIPT SRC =webcomponentsjs / webcomponents-lite.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接HREF =聚合物/ polymer.html的rel =进口＆GT;\r
＆LT;链接rel =进口HREF =纸键/纸button.html＆GT;\r
＆LT;链接rel =进口HREF =纸输入/纸input.html＆GT;\r
\r
＆LT; DOM模块ID =我的应用＆GT;\r
＆LT;模板＆GT;\r
＆LT;纸张输入标签=global.textVALUE ={{global.text}}＆GT;＆LT; /纸张输入＆GT;\r
＆LT;纸按钮募集ID =addHeadline＆gt;添加标题＆LT; /纸键＆GT;\r
＆LT;纸按钮募集ID =changeText＆GT;改变文字＆lt; /纸键＆GT;\r
＆所述p为H.; global.text：放大器;所述; {{global.text}}＆放大器; GT;＆下; / P＆GT;\r
＆LT; /模板＆GT;\r
＆LT;脚本＆GT;\r
聚合物（{\r
是：我的应用，\r
属性：{\r
全球：{}\r
}，\r
准备：功能（）{\r
this.count = 0;\r
\r
这$ addHeadline.addEventListener（点击，（）=方式＆gt; {\r
\r
VAR对myApp = Polymer.dom（的document.getElementById（我的应用））;\r
\r
VAR T = myApp.node.childNodes [1];\r
\r
VAR标题=使用document.createElement（H1）;\r
heading.textContent ={{global.text}};\r
\r
//附加到我的应用\r
Polymer.dom（this.root）.appendChild（航向）;\r
}）;\r
这$ changeText.addEventListener（点击，（）=方式＆gt; {\r
this.set（global.text，count-+ this.count ++）;\r
}）;\r
}\r
}）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; / DOM模块＆GT;\r
＆LT;我的应用＆GT;＆LT; /我的应用＆GT; \r
解决方案
我几乎用 Polymer.Templatizer 行为得到了它。不幸的是，似乎有一些bug或我的错误而被应用于动态创建的模板美元，父p $ pvents更新。我会在GitHub上引发问题。
\r
\r\r
\r＆LT;基地HREF =https://polygit.org/components/ ＆GT;\r
＆所述; SCRIPT SRC =webcomponentsjs / webcomponents-lite.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接HREF =聚合物/ polymer.html的rel =进口＆GT;\r
＆LT;链接rel =进口HREF =纸键/纸button.html＆GT;\r
＆LT;链接rel =进口HREF =纸输入/纸input.html＆GT;\r
\r
＆LT; DOM模块ID =我的应用＆GT;\r
＆LT;模板＆GT;\r
＆LT;纸张输入标签=global.textVALUE ={{global.text}}＆GT;＆LT; /纸张输入＆GT;\r
＆LT;纸按钮上调ID =上抽头addHeadline=addHeadline＆gt;添加标题＆LT; /纸键＆GT;\r
＆LT;纸按钮募集ID =changeText关于抽头=点击＆GT;改变文字＆lt; /纸键＆GT;\r
＆所述p为H.; global.text：放大器;所述; {{global.text}}＆放大器; GT;＆下; / P＆GT;\r
\r
＆LT;模板，如果=true是=DOM-如果＆GT;\r
＆LT; DIV＆GT;\r
DOM-IF：LT;输入类型=文本VALUE ={{global.text ::输入}}/＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /模板＆GT;\r
＆LT; /模板＆GT;\r
＆LT;脚本＆GT;\r
聚合物（{\r
是：我的应用，\r
行为：[Polymer.Templatizer]\r
属性：{\r
全球：{\r
值：{文字：'我'}，\r
通知：真\r
}\r
}，\r
准备：功能（）{\r
this.count = 0;\r
\r
//这保证了global.text被更新时，文本的变化\r
this._instanceProps = {\r
文字：真\r
};\r
}，\r
addHeadline：功能（）{\r
\r
this.template = document.createElement方法（模板）;\r
VAR templateRoot =使用document.createElement（'DIV'）;\r
templateRoot.innerHTML =`＆LT; H1＆GT; {{text.text}}＆LT; / H1＆GT;＆LT;输入类型=文本VALUE ={{text.text ::输入}}/＆GT;`;\r
//你不能只是设置的innerHTML上述＆lt;＆模板GT;\r
this.template.content.appendChild（templateRoot）;\r
\r
this.templatize（this.template）;\r
VAR克隆= this.stamp（{\r
文本：this.global\r
}）;\r
\r
//附加到我的应用\r
Polymer.dom（this.root）.appendChild（clone.root）;\r
}，\r
点击：函数（）{\r
this.set（global.text，count-+ this.count ++）;\r
}，\r
_forwardInstanceProp：功能（研究所，P，VAL）{\r
调试器;\r
}，\r
_forwardInstancePath：功能（研究所，P，VAL）{\r
//通知家长的正确路径时text.text变化\r
this.set（p.replace（/ ^文/环球），VAL）;\r
}，\r
_forwardParentProp：功能（道具，价值）{\r
调试器;\r
}，\r
_forwardParentPath：功能（道具，价值）{\r
调试器;\r
}\r
}）;\r
\r
＆LT; / SCRIPT＆GT;\r
＆LT; / DOM模块＆GT;\r
＆LT;我的应用＆GT;＆LT; /我的应用＆GT; \r
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 polymer-data-binding (in a "natural" polymer-way. Without a workaround as suggested in another stackoverflow answer.)
Please take a look at the code in this fiddle (https://jsfiddle.net/mkappeller/ken9Lzc7/) or at the bottom of this question. I really hope anyone out there is able to help me out. It would also help to know if there will be a way to do this some day in the future...?
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: <{{global.text}}></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>
解决方案
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: <{{global.text}}></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>
这篇关于添加＆QUOT;动态＆QUOT;与数据绑定到我的高分子元元的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
