在父元素和子元素之间绑定一个值，其中使用javascript创建子元素 [英] Bind a value between a parent and a child element where child element is created using javascript

问题描述

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

Using Polymer, does anyone know how to bind a value between a parent and a child element?

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

Below is my attempt however it doesn't work.

注意：需要使用JavaScript创建子组件。

Note: child-component needs to be created using 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>

谢谢：）

推荐答案

重新阅读Polymer的文档（多次）后，我找到了一个关于双向数据绑定事件如何工作每次更改时，Polymer都会触发DOM事件。从此我想出了下面的解决方法。

After re-reading Polymer's documentation (many times) I found a section about how Two-way data-binding events work where by on each change Polymer fires a DOM event. From this I came up with the work around below.

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

You'll notice this version also has two way binding so the host can change the child's value and the child can change the host's value!

<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创建子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！