Polymer.js databindings inside nested components

Question

I have a polymer element which is my parent element for my entire app. It performs ajax calls routinely and sets values according to the AJAX calls.

Within the polymer element I have a child element that needs to display one of these values dynamically.

Here is the child code:

<polymer-element name="main-status" attributes="auto">
    <template>
        <div id="status" flex>
            <div id="info" middle>
                <p>Robot is in {{ auto ? "AUTO" : "MANUAL T1" }} mode.</p>
            </div>
        </div>
        <link rel="stylesheet" type="text/css" href="main-status.css">
    </template>
    <script src="main-status.js"></script>
</polymer-element>

It is used in the parent as such:

<main-status auto="{{statusAuto}}"></main-status>

And {{statusAuto}} is confirmed to change (between true and false). This change does not get reflected in the child element. I have similarly tried binding to global variables using the monostate pattern suggested on polymer's website, and I still have no success.

How can this be achieved?

Answer 1

<main-status auto="{{statusAuto}}></main-status>

misses the closing quote - should be

<main-status auto="{{statusAuto}}"></main-status>

If that is only in the question not in your actual code try

<main-status auto="{{statusAuto}}">{{statusAuto}}</main-status>

and verify that statusAuto updates the value properly.