几天来，我尝试为聚合物提供一些“动态”元素:)不幸的是没有成功......
我的目标是在运行时添加一个元素，并通过聚合物数据绑定（以“自然”聚合物方式）用内容填充它。没有另一个建议的解决方法堆栈溢出答案.)
请看一下这个小提琴中的代码（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: <{{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>
我几乎通过使用得到了它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: <{{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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
