1

我似乎无法让双向绑定与 Polymer 2.0 一起使用。我只使用 Polymer.Element 将事情保持在最低限度。

我定义了一个父组件

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

我看到 fetch 的结果进入了 fetch 元素的 result 属性,而不是父级。

难道我做错了什么?

4

1 回答 1

2

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

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

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

这很容易忘记,因此polymer-linter最近更新了 以警告用户

于 2017-03-16T17:00:03.077 回答