Google Polymer: Listening to property changes from outside the element

Question

I'm currently building a controls using Google Polymer. I was wondering if it was possible to listen on the property change events from outside the element. The workaround I currently have is to fire an explicit event when the propertyChanged-method is called to which I listen from my other element.

// Property change in child element

Polymer('some-input', {
    valueChanged: function() {
        this.fire('valueChanged', this.value)
    }
});

[...]

// Listening in the parent element
ready: function() {
    this.$.someinput.addEventListener('valueChanged', function(evt) {
        var value = evt.detail;
        [...]
    });
}

Do you know if I can listen to the property change event directly?

Thanks, Pedro

Answer 1

If you're parent element is within a <polymer-element>, an easy way to "communicate" between elements is to use data binding on their published properties:

<parent-element value="{{val}}">
  <some-input value="{{val}}"></some-input>
</parent-element>

We consider this the "Polymeric" way to do things since it is very declarative and leverages features like data-binding.

If the parent is not within a Polymer element, you can use event delegation like you've suggested. I wrote an article on the different approaches for sharing information across elements that you may find interesting: Communication & Message Passing