2017-03-16 196 views
1

我似乎無法使用Polymer 2.0進行雙向綁定。我保持最小限度,只使用Polymer.Element。核心Polymer 2.0是否支持雙向綁定?

我定義了一個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'); 

我看到的結果的提取進入fetch元素的result屬性,而不是進入父級。

我做錯了什麼?

回答

2

是的,它的確如此。請確保調用super當你重寫一個方法:

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

這足以讓你的代碼工作(demo)。

這很容易忘記,所以polymer-linter最近更新到warn users about this