Polymer Two-Way Data Binding to new object instance not working

Question

I'm trying to two-way bind to native elements, and having some trouble with the DOM not updating on change.

If I have a simple property, it works fine: <input type="text" value="{{myData::input}}">

When I bind to a new object instance and update the binding through javascript, the DOM is not updated:

...

<input type="text" value="{{myData.bar::input}}">
<button type="button" on-click="changeBar">Update Me!</button>

...

var Foo = function(){
    this.bar = "polymer";
}

 Polymer({
            is: 'my-object',
            properties: {
                myData : {
                    type: Object,
                    notify: true,
                    readOnly: false
                }
            },
            ready: {
                  this.myData = new Foo();
            },
            changeBar: function(){
                  this.myData.bar = "poly";
            }

When I check this.myData.bar, it shows up = "poly". However, the DOM is still showing polymer. Also, the changed events are not bubbling up to the parent component.

I've also tried writing the javascript Foo module in several different ways.

Polymer version: 1.0.5/1.0.6

Thanks in advance!

Answer 1

As @zerodevx suggested, I replaced this.myData.bar = "poly" with this.set("myData.bar", "poly")