定制聚合物元件中的双向结合属性

Question

我想模块化我的部分代码。我创建了一个自定义元素，该元素将使用数组和数字。使用双向绑定，这应该不是问题。是的。似乎孩子在准备好之前就得到了财产。

<link rel="import" href="custom-element.html">
<dom-module id="is-parent">
<custom-element p1="{{p1}}"></custom-element>
<script>
Polymer({
is: 'is-parent',
properties: {
p1:{
type: Number,
notify: true,
observer:"obsParent",
value:0,
},
},
obsParent: function(newValue, oldValue) {
console.log(oldValue);
console.log(newValue);
console.log(this.p1);
},
ready: function(){
this.p1= 0;
},
</script>
</dom-module>

<dom-module id="is-child">
<script>
Polymer({
is: 'is-child',
properties: {
p1:{
notify: true,
observer:"obsChild",
},
p2:{
type: Boolean,
computed: 'p2Computer(p1)',
},
},
obsChild: function(newValue, oldValue) {
console.log(oldValue);
console.log(newValue);
console.log(this.p1);
},
p2Computer:function(p1){
if(p1===0){
return true;
}
return false;
},
ready: function(){
console.log(this.p1);
},
</script>
</dom-module>

我的双向绑定属性在子项中设置为未定义，在父项中设置为 0。这个例子要简化得多，但我的测试支持我的说法，即子项获得一个未定义的属性，即使在父项中设置为 0 时，该属性仍然不受威胁。

Answer 1

出于某种原因，您prop1作为正在编辑的属性，但是如果您希望它绑定到is-child的p1，则应将其p1。

<custom-element prop1="{{p1}}"></custom-element>

自

<custom-element p1="{{p1}}"></custom-element>