Datenbindung in einem dynamisch eingefügt polymer-element

Dort sind einige Zeiten, wenn wir könnten hinzufügen ein benutzerdefiniertes element dynamisch in einen Kontext. Dann:

Den eingelegten polymer erhalten könnte einige Eigenschaften gebunden zu einem anderen
Eigentum im Kontext, so kann es entsprechend ändern.
Bei der polymer-0.5, könnten wir PathObserver, um die Bindung einer Eigenschaft zu einem
context-Eigenschaft für ein kürzlich hinzugefügte Komponente. Habe ich jedoch nicht
einen workaround finden oder äquivalent, bei der polymer-1.0.

Habe ich ein Beispiel erstellt, für 0,5 und genau die gleiche für 1.0. Siehe unten den code von dem polymer, das es ermöglicht die Injektion. Auch können Sie die vollständigen plunker Beispiele für Klarheit.

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>

Bitte beachten Sie auch die vollständige plunkr Beispiel: 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>

Bitte beachten Sie auch die vollständige plunkr Beispiel: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Kennen Sie irgendeine Abhilfe oder gleichwertig mit polymer 1.0?

InformationsquelleAutor recluising | 2015-06-03

Gerade jetzt, es gibt keinen direkten Weg, es zu tun. Sie sollten manuell die doppelte Bindung durch das hören auf änderungen in der foo - Eigenschaft des übergeordneten Elements, und hören auf die foo-changed Ereignis des programmgesteuert erstellte 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>

Können Sie sehen, ein Beispiel hier: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

Danke, Es war so hilfreich 🙂
Das wird ein bisschen komisch, mit array-Spleißen und Objekt ändert sich, wenn ..

InformationsquelleAutor Gonzalo Ruiz de Villa

Leider denke ich, dass es nicht möglich ist dies durch eine "saubere" Weg. Den Pfad ersetzen Beobachter, müssen wir hinzufügen-link auf der "foo" value-änderungen des dynamischen Elementen. Der erste Schritt ist beobachten, die "foo" property-value-änderungen. Der zweite Schritt ist, replizieren Sie die änderungen auf die einzelnen dynamischen Elemente erstellt.

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
Polymer({
  is: "main-context",
  //Properties used to make the link between the foo property and the dynamic elements.
  properties: {
    foo: {
      type: String,
      observer: 'fooChanged'
    },
    dynamicElements: {
      type: Array,
      value: []
    }
  },
  ready: function() {
    //injecting component into polymer and binding foo via PathObserver
    var el = document.createElement("another-element");
    //Keeps a reference to the elements dynamically created
    this.dynamicElements.push(el);
    this.$.dynamic.appendChild(el);
  },
  //Propagates the "foo" property value changes
  fooChanged: function(newValue) {
    this.dynamicElements.forEach(function(el) {
      el.foo = newValue;
    });
  }
});
</script>