javascript - 在父元素和子元素之间绑定一个值，其中子元素是使用 javascript 创建的

Question

使用 Polymer，有人知道如何在父元素和子元素之间绑定值吗？

以下是我的尝试，但它不起作用。

注意：child-component需要使用 JavaScript 创建。

<dom-module id="host-component">
  <template>
      <div>{{sharedValue}}</div>
      <div id="childComponentContainer">
          <!-- CHILD-COMPONENT GETS CREATED HERE -->
      </div>
  </template>
  <script>
    Polymer({is:'host-component',
        properties:{
            sharedValue:{
                type: String,
                notify:true,
                observer: 'sharedValueChanged'
            }
        },
        attached: function(){
            var newElement = document.createElement('child-component');
            Polymer.dom(this.$.childComponentContainer).appendChild(newElement);
        },
        sharedValueChanged:function(d){
            console.log(d, ", said the child");
        }
    });
  </script>
</dom-module>

<dom-module id="child-component">
  <template>
      <input is="iron-input" bind-value="{{sharedValue}}" />
  </template>
  <script>
    Polymer({is:'child-component',
        properties:{
            sharedValue:{
                type: String,
                notify:true,
                reflectToAttribute:true,
            }
        },
    });
  </script>
</dom-module>

谢谢 ：）

Answer 1

在重新阅读了 Polymer 的文档（多次）之后，我找到了一个关于双向数据绑定事件如何工作的部分，其中每次更改 Polymer 都会触发一个 DOM 事件。从这里我想出了下面的工作。

你会注意到这个版本也有两种方式绑定，所以主机可以改变孩子的价值，孩子可以改变主人的价值！

<dom-module id="host-component">
  <template>
      <div>Host: <span>{{sharedValue}}</span></div>
      <div>Host: <span><input is="iron-input" bind-value="{{sharedValue}}" /></span></div>
      <div id="childComponentContainer">
          <!-- CHILD-COMPONENT GETS CREATED HERE -->
      </div>
  </template>
  <script>
    Polymer({is:'host-component',
        properties:{
            sharedValue:{
                type: String,
                notify:true,
                value: "Unchanged",
                observer: 'sharedValueChanged'
            }
        },
        attached: function(){
            this.$.childComponent = document.createElement('child-component');
            var host = this;

            //Listens to the child's sharedValue. When changed it will update host's sharedValue.
            this.$.childComponent.addEventListener("shared-value-changed", function(e){
                host.sharedValue = this.sharedValue;
            });
            Polymer.dom(this.$.childComponentContainer).appendChild(this.$.childComponent);
        },

        //Observes the hosts's sharedValue. When changed it will update child's sharedValue.
        sharedValueChanged: function(value){
            if (this.$.childComponent) {
                this.$.childComponent.sharedValue = value;
            }
        }
    });
  </script>
</dom-module>




<dom-module id="child-component">
  <template>
      <div>Child: <span>{{sharedValue}}</span></div>
      <div>Child: <span><input is="iron-input" bind-value="{{sharedValue}}" /></span></div>

  </template>
  <script>
  Polymer({is:'child-component',
        properties:{
            sharedValue:{
                type: String,
                notify:true,
                value:"Unchanged",
                reflectToAttribute:true,
            }
        }
    });
  </script>
</dom-module>