Polymer change notification and two-way binding syntax

Question

I'm trying to figure out how to use the 2-way notifications in polymer described here

But while this explains that there is some mechanism for notifying if an object on a child element has changed:

When a sub-property of a property configured with type: Object changes, an element fires a non-bubbling -changed DOM event with a detail.path value indicating the path on the object that changed.

But it doesn't give any clue (that I can sort out) how the syntax would look to script some behaviour based on this change.

For example if I have a parent:

<dom-module id="parent-element">
<template>
<child-element obj="{{myObj}}"></child-element>
</template>
<script>
Polymer({
    is: "parent-element",
    myObj: {
        type: Object
    },
    parentClick: function(){
        this.myName = "Parent";
    },
    myObjChanged: function(){ //How to handle this event?
        console.log("I have no idea what I'm doing")
    }
    });
</script>

and I have a child element:

<dom-module id="child-element">
    <template>
     <span on-click="childClick">Click me</span>
</template>

<script>
    Polymer({
        is: 'child-element',
        properties: {
            obj: {
                type: Object,
                notify: true
            }
        },
        ready: function(){
            this.obj = {foo: "bar"}
        },
        childClick: function(){
            this.obj.foo = "baz"
        }
    });
</script>

When the child is clicked, I expect some event to fire and get picked up by the parent, but I have no clue how to script for that event at the parent. What am I missing?

Answer 1

I recently had this problem and did this by firing my own event. You can see the documentation for that here (please note that this documentation is for 0.5 but I have done this with version 1.0). In your child element you could change your childClick function to fire the custom event as follows:

childClick: function(){
    this.obj.foo = "baz"
    this.fire("child-element-click"); // this can be anything you want...
}

and then in your parent element you want to add a listener to the child-element :

    <dom-module id="parent-element">
    <template>
        <child-element obj="{{myObj}}" on-child-element-click="myObjChanged"></child-element>
    </template>
<script>
    Polymer({
        is: "parent-element",
        myObj: {
            type: Object
        },
        parentClick: function () {
            this.myName = "Parent";
        },
        myObjChanged: function () {
            console.log("I have no idea what I'm doing")
        }
    });
</script>