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

正如@zerodevx所建议的，我用this.set("myData.bar", "poly")替换了this.myData.bar = "poly"