Polymer two way binding

Question

Banging my head on how to use polymer two way binding.

I have a home made Polymer element that defines a boolean property through

    Polymer({
        is: "test-element",
        ready: function() {},

        properties: {
            propEnabled: {
                type: Boolean,
                notify: true,
                value: false,
                observer: "propEnabledChanged"
            }
        },

        // Called when aoEnabled is changed
        propEnabledChanged: function() { console.log("propEnabled value switched to " + this.propEnabled); },
    });

Now I'm using this in an HTML page

<body>
    <template id="t" is="dom-bind">           
        <test-element id="testElement"></test-element>

        <paper-toggle-button checked="{{Model.propEnabled}}">prop. enabled</paper-toggle-button>
        <button id="switchInternalState">switch state</button>          
    </template>
</body>

<script>
     var t = document.querySelector('#t');

    document.addEventListener('WebComponentsReady', function() {
        console.log('WebComponentsReady');

        // We have to bind the template with the model
        var t = document.querySelector('#t');
        t.Model = document.getElementById("testElement");

        // chaging the property directly does not reflect in the GUI... :-(
        var button = document.getElementById("switchInternalState");
        button.addEventListener("click", function() { 
            t.Model.set("propEnabled", !t.Model.propEnabled);
        });
    });

</script>

But when clicking on the switch state button... I get the log propEnabled value switched to true

But the toogle button on the page does not change... If I add a simple

 <label>{{Model.propEnabled}}</label>

The label does not change either... To me it looks a bit like one way binding where it should be 2 way as toggling the button fire the log and properly change the component propEnabled value. So it really looks like one way binding to me.

So... How can we actually benefit from two way binding with Polymer templates ????

Srik Srik · Accepted Answer · 2015-10-18T15:26:23

You need to assign the propEnabled property from dom-bind to the test-element through html.

<test-element id="testElement" prop-enabled={{propEnabled}}></test-element>

<paper-toggle-button checked="{{propEnabled}}">prop. enabled</paper-toggle-button>

Also you don't need the variable t.Model in your script. You can remove it. The event listener should be like below

    button.addEventListener("click", function() { 
        t.propEnabled = !t.propEnabled;
    });

The following plunker has the working code: http://embed.plnkr.co/13QJ7QFETIBg4bEiCMS7/preview

Polymer two way binding

1 Answers