多层次的双向数据绑定

我想要在两个层次上访问纸张输入的值。不幸的是，这是行不通的。这是我的最小例如：多层次的双向数据绑定

<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}} 是不够的。我还需要做什么？

来源

2017-10-16 Niels

您需要notify: true否则父元素将不被通报关于变更申报blockValue在text-block元素：

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

Reference

来源

2017-10-16 16:49:10 Scarygami

我有点希望它是简单的东西一样，。谢谢！它工作正常。 – Niels

多层次的双向数据绑定

回答

相关问题