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

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>