2017-10-16 84 views
0

我想要在兩個層次上訪問紙張輸入的值。不幸的是,這是行不通的。這是我的最小例如:多層次的雙向數據綁定

<html> 
 
<head> 
 
    <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
    <link rel="import" href="paper-input/paper-input.html"> 
 
</head> 
 
<body> 
 

 
<dom-module id="text-block"> 
 
    <template> 
 
    <style> 
 
     #input-test { 
 
     width: 100%; 
 
     } 
 
    </style> 
 

 
    <paper-input id="input-test" label="Test" value="{{blockValue}}"></paper-input> 
 
    </template> 
 

 
    <script> 
 
     class TextBlock extends Polymer.Element { 
 

 
      static get is() { 
 
       return 'text-block'; 
 
      } 
 

 
      static get properties() { 
 
       return { 
 
        blockValue: { 
 
         type: String, 
 
         value: '', 
 
         observer: '_onBlockValueChanged' 
 
        } 
 
       } 
 
      } 
 
      
 
      _onBlockValueChanged() { 
 
      console.log('Block value changed'); 
 
      console.log(this.blockValue); 
 
      } 
 

 
     } 
 

 
     customElements.define(TextBlock.is, TextBlock); 
 
    </script> 
 
</dom-module> 
 

 
<dom-module id="my-element"> 
 

 
    <template> 
 
    <text-block block-value="{{_myValue}}"></text-block> 
 
    </template> 
 

 

 
    <script> 
 
     HTMLImports.whenReady(function() { 
 
      class MyElement extends Polymer.Element { 
 
       static get is() { return 'my-element'; } 
 

 
       static get properties() { 
 
        return { 
 
         _myValue: { 
 
          type: String, 
 
          value: '', 
 
          observer: '_myValueChanged' 
 
         } 
 
        }; 
 
       } 
 

 
       _myValueChanged() { 
 
        console.log('_myValue changed'); 
 
        console.log(this._myValue); 
 
       } 
 

 

 
      } 
 
      customElements.define(MyElement.is, MyElement); 
 
     }); 
 

 
    </script> 
 

 
</dom-module> 
 

 
<my-element></my-element> 
 

 
</body> 
 
</html>

當我改變紙張輸入的內容,變更轉發到文本區元素的blockValue,但不進一步的_myValue主要元素。看起來與 block-value={{_myValue}} 是不夠的。我還需要做什麼?

回答

1

您需要notify: true否則父元素將不被通報關於變更申報blockValuetext-block元素:

blockValue: { 
    type: String, 
    value: '', 
    notify: true, 
    observer: '_onBlockValueChanged' 
} 

Reference

+0

我有點希望它是簡單的東西一樣, 。謝謝!它工作正常。 – Niels