Data binding in a dynamically inserted polymer element

Question

There're some times when we could need adding a custom element dynamically into a context. Then:

• The inserted polymer could receive some properties bound to another property inside the context, so it can change accordingly.

• At polymer 0.5 we could use PathObserver to binding a property to a context property for a recently added component. However, I did not find a workaround or equivalent at polymer 1.0.

I have created an example for 0.5 and just the same for 1.0. See below the code of the polymer that it makes the injection. Also you can see the full plunker examples for clarity.

Ej 0.5:

<polymer-element name="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
  <script>
    Polymer({
      domReady: function() {
        // injecting component into polymer and binding foo via PathObserver
        var el = document.createElement("another-element");
        el.bind("foo", new PathObserver(this,"foo"));
        this.$.dynamic.appendChild(el);
      }
    });
  </script>
</polymer-element>

Please, see the full plunkr example: http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=preview

Ej 1.0:

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: "main-context",
    ready: function() {
      // injecting component into polymer and binding foo via PathObserver
      var el = document.createElement("another-element");
      // FIXME, there's no a path observer: el.bind("foo", new PathObserver(this,"foo"));
      this.$.dynamic.appendChild(el);
    }
  });
</script>

Please, see the full plunkr example: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Do you know some workaround or equivalent with polymer 1.0?

Answer 1

Right now, there is no direct way to do it. You should manually do the double binding by listening to changes in the foo property of the parent element and listening to the foo-changed event of the programmatically created element.

<script>   
Polymer({
  is: "main-context",
  properties: {
    foo: {
      type: String,
      observer: 'fooChanged'
    }
  },
  ready: function() {
    var self = this;
    var el = this.$.el = document.createElement("another-element");

    //set the initial value of child's foo property
    el.foo = this.foo;
    //listen to foo-changed event to sync with parent's foo property
    el.addEventListener("foo-changed", function(ev){
      self.foo = this.foo;
    });

    this.$.dynamic.appendChild(el);
  },
  //sync changes in parent's foo property with child's foo property
  fooChanged: function(newValue) {
    if (this.$.el) {
      this.$.el.foo = newValue;
    }
  }
});
</script>

You can see a working example here: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview