Two-way 在自定义聚合物元素中绑定 属性

Question

我想模块化我的部分代码。我创建了一个可与数组和数字一起使用的自定义元素。使用 two-way 绑定，这应该不是问题。这是。似乎 child 在准备就绪之前就得到了 属性。

<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>

我的 two-way 绑定 属性 在 child 中设置为未定义，在 parent 中设置为 0。这个例子已经简化了很多，但我的测试支持我的说法，即 child 得到一个未定义的 属性 即使在 parent.

中设置为 0 仍然不安全的东西

Answer 1

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

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

到

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