CODEWITHSUNDEEP
javascriptpolymer-1.0
Damian Nadales
Damian Nadales

Reputation: 5037

How to properly notify data changes between siblings in polymer

I would like to have a polymer element with two sub-elements, one that produces data, and the other that performs some action when the data changes (in my case: sending a notification to a server).

To implement this, I wrote a polymer element, namely root, with the following structure (names changed to simplify the discussion):

<producer data={{foo.bar}}></producer>
<consumer data=[[foo]]></consumer>

The producer changes the data using the set('property', 'value') method, so that the root element sees the notifications. The problem is that the consumer element won't notice the changes to foo since they involve a sub-property.

To solve this, I tried using a computed binding as follows:

<producer data={{foo.bar}}></producer>
<consumer data=[[_compute(foo)]]></consumer>

...
_compute: function() {
    return this.foo;
}

However this won't cause the consumer to be notified. I think the reason for this is that the returned object is the same reference (only a sub-attribute changed). Currently the workaround I've used is to use the following version of the compute function:

_compute: function() {
    return Object.assign({}, this.foo);
}

This works (the consumer element gets notified), however I'm affraid it might not be the most efficient (I'm creating an object at every call of _compute) and/or elegant way. Then my question is: what is the proper way to achieve this behavior in Polymer?

Upvotes: 0

Views: 1186

Answers (2)

Dogs
Dogs

Reputation: 3167

Do you have access to modify the consumer element?

The best way to fix this is to have the consumer element have a multi-property observer that listens for sub-property changes on the data property.

It might look something like this:

Polymer({
    is: 'consumer',
    properties: {
        data: Object
    },
    observers: ['consumeData(data, data.*)'],
    consumeData: function (data) {
        //Do whatever you were planning on doing with data here
    }
});

The advantage of an approach like this is that your 'consumer' element just 'knows' how to consume the data object when a sub-property on it changes. Because of the lighter weight approach to data binding in Polymer, trying to implement this behavior outside of the 'consumer' element will necessarily be more expensive and more complicated, since it requires either tricking the data binding into thinking the data object is new by supplying it with a new reference to a copy or forgoing the data binding altogether and building an approach on top of events and calling methods on the consumer in response to events. So if at all possible, I would recommend trying the approach above.

Polymer's data binding does not work the same way as some other two-way enabled data binding implementations, like what you might find in AngularJS. Rather than using dirty-checking, which is extremely expensive, Polymer uses an event based 'path notification' approach. When a sub-property on a property changes, a Polymer element which has that property will fire an event to it's immediate children bound to that property, notifying them that the path 'property.subProperty' has changed. In order for consumer to act on those changes, it has to be told to listen to changes along that 'property.subProperty' path. We specify paths in our polymer observers by using the syntax above. In this case, putting data.* in our observer means we want to listen to any path off of data, so that any notified property change on the data property will trigger the observer.

Upvotes: 1

Chris W
Chris W

Reputation: 805

As you have noticed there isn't an elegant way of doing this. The way you got it working is interesting.

An alternative way which I would expect to work would be to fire an event from within the producer element.

this.fire('data', {data: this.foo.bar});

and then have the parent/root element listen for this event and then update the data property of the consumer element. 

<producer on-data="handleData"></producer>
<consumer id="consumer"></consumer>

handleData: function(e) {
   self.$.consumer.data = e.detail.data;
}

Edit:

You could make a new property that you compute within the producer element. Then you won't have to do a computed function everytime you want to access foo.bar

Producer element

properties: {
   foo: {},
   bar: {
      computed: 'computeBar(foo)'
   }
}

Root element:

<produce bar="{{bar}}"></producer>
<consumer data="[[bar]]"></consumer>

Upvotes: 0

Related Questions