CODEWITHSUNDEEP
templatespolymer
max
max

Reputation: 73

Binding to sibling elements

I see that directly binding to sibling elements is no longer supported - https://www.polymer-project.org/1.0/docs/migration.html#binding-to-sibling-elements

The suggested approach for 1.0 works for properties but what about binding directly to the sibling element itself, for example:

<template>
  <x-publisher id="publisher"></x-publisher>
  <x-subscriber publisher="{{$.publisher}}"></x-subscriber>
</template>

I used this in 0.5 to access methods of the sibling element as well as properties. Is there any way to do this in 1.0? And generally is this bad practice?

Update

Based on Vartan's comment I took a look at iron-meta & seems you can do something like this in the x-publisher definition:

new Polymer.IronMeta({key: 'publisher', value: this});

Then in the x-subscriber definition you can do:

this.publisher = (new Polymer.IronMeta()).byKey('publisher');

However you don't get the benefits of the binding system with this - for example you can't use the observers array to observe path based property changes to the publisher object. You could setup an object observer directly but starts to become quite a bit messier than the old 0.5 way of binding directly to siblings.

Understood if this is just part of the performance tradeoff, but want to confirm there's not a better way! Also would be nice to know if binding to the full element is generally a performance issue anyways.

Upvotes: 2

Views: 391

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

You can do something like this:

<template>
  <x-publisher id="publisher"></x-publisher>
  <x-subscriber publisher="{{getElement('publisher')}}"></x-subscriber>
</template>
...
getElement: function(name) { return this.$[name]; }

Upvotes: 2

Related Questions