有时候,我们可能需要将自定义元素动态添加到上下文中。然后:
插入的聚合物可能会收到绑定到上下文中另一个属性的某些属性,因此可以相应更改。
在聚合物0.5处,我们可以使用PathObserver将属性绑定到最近添加的组件的上下文属性。但是,我在聚合物1.0上找不到解决方法或等效方法。
我为0.5创建了一个示例,为1.0创建了相同的示例。参见下面进行注射的聚合物代码。您也可以看到完整的示例代码示例,以获取清晰的信息。
Ej 0.5:
<polymer-element name="main-context">
<template>
<one-element foo="{{foo}}"></one-element>
<div id="dynamic">
</div>
</template>
<script>
Polymer({
domReady: function() {
// injecting component into polymer and binding foo via PathObserver
var el = document.createElement("another-element");
el.bind("foo", new PathObserver(this,"foo"));
this.$.dynamic.appendChild(el);
}
});
</script>
</polymer-element>
请查看完整的plunkr示例:http ://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=preview
Ej 1.0:
<dom-module id="main-context">
<template>
<one-element foo="{{foo}}"></one-element>
<div id="dynamic">
</div>
</template>
</dom-module>
<script>
Polymer({
is: "main-context",
ready: function() {
// injecting component into polymer and binding foo via PathObserver
var el = document.createElement("another-element");
// FIXME, there's no a path observer: el.bind("foo", new PathObserver(this,"foo"));
this.$.dynamic.appendChild(el);
}
});
</script>
请查看完整的plunkr示例:http ://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview
您知道聚合物1.0的一些解决方法或等效方法吗?
目前,尚无直接方法可以做到这一点。您应该通过侦听foo
父元素的属性更改和侦听以foo-changed
编程方式创建的元素的事件来手动执行双重绑定。
<script>
Polymer({
is: "main-context",
properties: {
foo: {
type: String,
observer: 'fooChanged'
}
},
ready: function() {
var self = this;
var el = this.$.el = document.createElement("another-element");
//set the initial value of child's foo property
el.foo = this.foo;
//listen to foo-changed event to sync with parent's foo property
el.addEventListener("foo-changed", function(ev){
self.foo = this.foo;
});
this.$.dynamic.appendChild(el);
},
//sync changes in parent's foo property with child's foo property
fooChanged: function(newValue) {
if (this.$.el) {
this.$.el.foo = newValue;
}
}
});
</script>
您可以在此处看到一个有效的示例:http : //plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句