polymer - Bind a value between a parent and a child element where child element is created using javascript - Stack Overflow

admin管理员组

文章数量:1429060

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.

Note: child-ponent needs to be created using JavaScript.

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

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

Thanks :)

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.

Note: child-ponent needs to be created using JavaScript.

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

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

Thanks :)

• javascript
• polymer
• web-ponent
• polymer-1.0

Share Improve this question Follow edited Jun 6, 2015 at 21:24 user1693593 asked Jun 6, 2015 at 17:08 JammerJammer 1,56311 gold badge2020 silver badges3737 bronze badges 1

• there is a similar post here – Erik Höhmann Commented Jun 7, 2015 at 13:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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-ponent">
  <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-ponent',
        properties:{
            sharedValue:{
                type: String,
                notify:true,
                value: "Unchanged",
                observer: 'sharedValueChanged'
            }
        },
        attached: function(){
            this.$.childComponent = document.createElement('child-ponent');
            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-ponent">
  <template>
      <div>Child: <span>{{sharedValue}}</span></div>
      <div>Child: <span><input is="iron-input" bind-value="{{sharedValue}}" /></span></div>

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

本文标签：