Observe x and y coordinates

[Gonzalo Tirapegui]

Hi , in your core-drag-drop functions (implemented on polymer 0.5) as you can see in this source , line 35-37 the polymer component (as i understand) observes the x and y property of itself and it call to the coordinatesChanged method to execute it , when you search in the migration guide you say "Unlike Polymer 0.5, observers do not support the this.$.elementId syntax for observing changes to the properties of local DOM children. However, in some cases you can use data binding to bind a property to the child element’s property, and observe the local property instead." , so , how you can observe the same property (on Polymer 1.0) if you can't reference it?

[Arthur Evans]

Hi Gonzalo,

First off, observing the element's own properties, like in `core-drag-drop` is no problem in 1.0. That same observer would look like this:

  observers: [

    'coordinatesChanged(x,y)'

  ],

  coordinatesChanged: function(x, y) { ... }

You can also bind to a property on a local DOM child:

<dom-module is="test-el">

  <template>

    <!-- bind child-el.childProp to test-el.parentProp -->

    <child-el id="child" child-prop="{{parentProp}}"></child-el>

  </template>

  <script>Polymer({ ... });</script>

</dom-module>

Now the value of `childProp` is available in your element as `parentProp` so you can 

define an observer for it:

observers: [

  'childPropChanged(parentProp)'

]

In 0.5, you could skip the binding and observe a child prop directly, doing something like:

observe: {

  '$.child.childProp': 'childPropChanged'

}

This shortcut is what you can't do anymore. An element can only create observers for its own properties.

Further reading: 

https://www.polymer-project.org/1.0/docs/devguide/properties.html#change-callbacks

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html

Hope that helps,

Arthur

On Wed, May 4, 2016 at 1:40 PM, Gonzalo Tirapegui <gonzalo....@gmail.com> wrote:

Hi , in your core-drag-drop functions (implemented on polymer 0.5) as you can see in this source , line 35-37 the polymer component (as i understand) observes the x and y property of itself and it call to the coordinatesChanged method to execute it , when you search in the migration guide you say "Unlike Polymer 0.5, observers do not support the this.$.elementId syntax for observing changes to the properties of local DOM children. However, in some cases you can use data binding to bind a property to the child element’s property, and observe the local property instead." , so , how you can observe the same property (on Polymer 1.0) if you can't reference it?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/161f0a60-d661-4c89-8a7d-b14c0c400bc7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Gonzalo Tirapegui]

Thanks Arthure , the first solution works perfectly fine!!