Data binding between sibling elements in a Polymer dom-bind template

Question

I have a <dom-bind> template containing two elements - one is a button, the other a list. When the list is loading (it's loading property is true), the buttons active property should be set to false, and vice versa.

I can't get the binding between them to work. Of course I could create a new element out of the whole thing, but I'd rather avoid it if possible.

This is my <dom-bind> template:

<dom-bind id="messageListScreen">
    <template>
        <paper-progress-button on-click="fetchNewMessages" active="[[!loading]]" active-text="Refresh" inactive-text="Refreshing..." raised></paper-progress-button>
        <message-grid id="grid" loading="{{loading}}"></message-grid>
    </template>
</dom-bind>

With the above code, nothing happens. If I do this

<script>
    document.addEventListener("WebComponentsReady", function(event){
        let self = document.getElementById('messageListScreen');
        self.loading = self.$.grid.loading;
    });
</script>

self.loading does get the value of grid.loading, but when the value of grid.loading changes, the value of self.loading stays the same.

Is there any way to bind the value of grid.loading to the active property of the <paper-progress-button> using <dom-bind>?

Answer 1

You should use two-way binding.

Add notify:true to the loading properties in message-grid, and set the loading in message-grid via this.set('loading', false) (instead of this.loading = false).

You should also have a property called loading in messageListScreen too. You probably have, you don't need it, but it's nice for documentation.

---

Another thing is that boolean attributes are always true if they are present, hence loading will always be true in both cases, no matter what values the attribute has (true||false). Switch the boolean to a number (int) instead, where 1 is true and 0 is false.