聚合物聚合物2.0核心是否支持双向绑定? [英] Does core Polymer 2.0 support two-way binding?

问题描述

我似乎很难通过双向绑定来与Polymer 2.0一起使用.我只使用Polymer.Element来使事情保持最少.

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.

我定义了父组件:

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

获取类如下:

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

我看到访存的结果进入了访存元素的result属性，而不是父项.

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

我做错什么了吗?

推荐答案

是的.覆盖方法时，请确保调用super:

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

这很容易忘记，因此polymer-linter最近更新为警告用户关于这个.

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

这篇关于聚合物聚合物2.0核心是否支持双向绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！