核心 Polymer 2.0 是否支持双向绑定?

Does core Polymer 2.0 support two-way binding?

我似乎无法使用 Polymer 2.0 进行双向绑定。我保持最小化,只使用 Polymer.Element.

我定义了一个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>

fetch class 看起来像:

       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);

请注意,我正在尝试我能想到的一切:

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

我看到提取结果进入提取元素的结果 属性,而不是进入父元素。

我是不是做错了什么?

是的,确实如此。确保在覆盖方法时调用 super

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

这足以使您的代码正常工作 (demo)。

这很容易忘记,所以 polymer-linter 最近更新为 warn users about this