Does core Polymer 2.0 support two-way binding?

问题

I seem to be having trouble getting two-way binding to work with Polymer 2.0. I'm keeping things minimal, only using Polymer.Element.

I define a parent component:

<dom-module id="example1a-component">
  <template>
    <xtal-fetch req-url="generated.json" result="{{myFetchResult}}"></xtal-fetch>
    <div>fetch result: 
        <span>{{myFetchResult}}</span>
    </div>
  </template>


  <script>
    class Example1a extends Polymer.Element{
        static get is(){return 'example1a-component'}
        static get properties(){
            return {
                myFetchResult :{
                    type: String
                }
            }
        }
    }
    customElements.define(Example1a.is, Example1a)
  </script>
</dom-module>

The fetch class looks like:

       class XtalFetch extends Polymer.Element {
        static get is() { return 'xtal-fetch'; }
        static get properties() {
            return {
                debounceTimeInMs: {
                    type: Number
                },
                reqInfo: {
                    type: Object,
                },
                reqInit: {
                    type: Object
                },
                reqUrl: {
                    type: String,
                    observer: 'loadNewUrl'
                },
                /**
                * The expression for where to place the result.
                */
                result: {
                    type: String,
                    notify: true,
                    readOnly: true
                },
            };
        }
        loadNewUrl() {
            debugger;
        }
        ready() {
            if (this.reqUrl) {
                const _this = this;
                fetch(this.reqUrl).then(resp => {
                    resp.text().then(txt => {
                        _this['_setResult'](txt);
                        _this['result'] = txt;
                        _this.notifyPath('result');
                    });
                });
            }
        }
    }
    elements.XtalFetch = XtalFetch;
    customElements.define(xtal.elements.XtalFetch.is, xtal.elements.XtalFetch);

Note that I am trying everything I can think of:

_this['_setResult'](txt);
_this['result'] = txt;
_this.notifyPath('result');

I see the result of the the fetch going into the result property of the fetch element, not into the parent.

Am I doing something wrong?

回答1:

Yes, it does. Make sure to call super when you're overriding a method:

ready() {
  super.ready(); // <-- important!
  ...
}

That's enough to make your code work (demo).

This is easy to forget, so the polymer-linter was recently updated to warn users about this.

来源：https://stackoverflow.com/questions/42839652/does-core-polymer-2-0-support-two-way-binding