多层次双向数据绑定

Question

我想通过两个级别访问纸张输入的值。不幸的是，这是行不通的。这是我的最小示例：

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

当我更改 paper-input 的内容时，更改会转发到文本块元素的 blockValue，但不会进一步转发到主元素的 _myValue。似乎与 block-value={{_myValue}} 是不够的。我还需要做什么？

Answer 1

您需要在 text-block 元素中使用 notify: true 声明 blockValue 否则父元素将不会收到有关更改的通知：

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

Reference

多层次双向数据绑定

Two-way data binding over multiple levels

javascript

polymer

polymer-2.x

paper-elements