Data binding between published properties of two custom elements inside an auto binding template - Polymer 1.0

2
votes

Problem: I have an auto binding template in my main index.html page. Inside the template I am using two of my custom elements. One element is the producer of some data and the other one is the consumer of that data. These custom elements expose published/declared properties for each other to use and bind to. I was able to do that in Polymer 0.5 fairly easily (an example shown below). How do I do the same in Polymer 1.0?

How I used to do in Polymer 0.5? In Polymer 0.5 I used to data bind between published properties of two custom elements using curly brace syntax and then inside it used the auto node finding concept to directly bind to other element's published property. An example shown below,

<template is="auto-binding">
    <my-navigation selectedLabel="Home" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{ $.my_navigation.selectedLabel }}" id="my_scaffold"></my-scaffold>
</template>

I tried something similar in Polymer 1.0 as shown in the example below

<template is="dom-bind">
    <my-navigation selectedLabel="Home" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{ $.my_navigation.selectedLabel }}" id="my_scaffold"></my-scaffold>
</template>

But it throws an error:-

Uncaught TypeError: Cannot read property '$' of undefined

2
polymerweb-component

2 Answers

1
votes

You can't do $.* bindings inside the template in Polymer 1.0. Instead, either refactor or use computed functions.

In your situation, since selectedLabel and toolbartitle shares the same value, it is much better to simply bind them to the same property.

Also, attribute names that are declaratively passed in (through the element tag) need to be serialized, so selectedLabel becomes selected-label.

<body>
  ...
  <template id="tpl" is="dom-bind">
    <my-navigation selected-label="{{myLabel}}" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{myLabel}}" id="my_scaffold"></my-scaffold>
  </template>

  <script>
    ...
    window.addEventListener("WebComponentsReady", function (e) {
      document.querySelector("#tpl").myLabel = "Home";
      ...
    });
    ...
  </script>
</body>
0
votes

There is probably a better way to do that, but you can try this:

<body>
<template id="app" is="dom-bind">
    <my-navigation selectedLabel="Home" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{ selectedLabel }}" id="my_scaffold"></my-scaffold>
</template>
<script>
        var app = document.querySelector('#app');

        app.addEventListener('template-bound', function () {
            console.log('Our app is ready to rock!');
        });

        window.addEventListener('WebComponentsReady', function () {
            document.querySelector('body').removeAttribute('unresolved');

            var my-navigation = document.querySelector('my-navigation');

            // This will add the variable to the 'app' context (template)
            app.selectedLabel = my-navigation.selectedLabel;
        });
</script>
</body>