在使用 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 的文档（多次）后，我发现了一个关于 how Two-way data-binding events work 的部分，其中每次更改 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>

在使用 javascript 创建子元素的父元素和子元素之间绑定一个值

Bind a value between a parent and a child element where child element is created using javascript

javascript

polymer

web-component

polymer-1.0