Two-way binded propery in custom polymer element

Question

I want to modulize parts of my code. I've created a custom element that are to work with an Array and a Number. With two-way binding this should not be an issue. It is. It seem as though the child gets the property before it's ready.

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

My two-way binded property is set as undefined in the child and set to 0 in the parent. This example is much simplified but my tests supports my claim that child get an undefined property what remain undefiend even when set to 0 in the parent.

Answer 1

For some reason you have prop1 as the property that is being edited, but it should be p1 if you want it to bind to is-child's p1.

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

to

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