我嵌套了相互交互的自定义元素。
<dom-module id="dom-element">
<template>
<custom-element bindingTest="{{found}}"></custom-element>
</template>
<script>
Polymer({
is: "dom-element",
properties: {
found: {
type:String,
value:"4"
}
},
ready: function() {
this.addEventListener("found-changed", this.foundChanged);
},
foundChanged:function(e){
console.log("found changed");
}
});
</script>
</dom-module>
子自定义元素:
<dom-module id="custom-element">
<template>
<button on-click="toParent">Send to parent</button>
</template>
<script>
Polymer({
is: "custom-element",
properties:{
bindingTest: {
type: String,
notify: true
}
},
toParent: function () {
this.bindingTest = "change of binding test"
}
});
</script>
</dom-module>
如果我理解正确, this.bindingTest = "change of binding test"应该通知父自定义元素,并且 "found"参数应该等于 "change of binding test"字符串,也就是说,必须调用 toParent 函数,但由于某种原因它没有被调用。当绑定(bind)测试发生变化时,如何通知家长?
最佳答案
编辑:
这里的问题是您错误地访问了子元素的 bindingTest
属性。来自 documentation
In order to configure camel-case properties of elements using attributes, dash- case should be used in the attribute name.
因此您需要将 custom-element
标记更改为:
<custom-element binding-test="{{found}}"></custom-element>
我已经设置了一个plunker here供您查看。
关于javascript - 数据绑定(bind)属性的更改不会向上传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31311864/