Datenbindung in einem dynamisch eingefügten Polymerelement

Question

Es kann vorkommen, dass wir ein benutzerdefiniertes Element dynamisch in einen Kontext einfügen müssen. Dann:

• Das eingesetzte Polymer könnte einige Eigenschaften erhalten, um eine andere Eigenschaft innerhalb des Kontext gebunden, so kann es entsprechend ändern.

• Bei Polymer 0.5 konnten wir PathObserver verwenden, um eine Eigenschaft an eine Context-Eigenschaft für eine kürzlich hinzugefügte Komponente zu binden. Jedoch habe ich nicht einen Workaround oder Äquivalent bei Polymer 1.0 gefunden.

Ich habe ein Beispiel für 0.5 und genau das gleiche für 1.0 erstellt. Siehe unten den Code des Polymers, dass es die Injektion macht. Sie können auch die vollständigen Plunker Beispiele für Klarheit sehen.

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, sehen Sie die volle 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, sehen Sie die volle plunkr Beispiel: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Kennen Sie Workarounds oder Äquivalente zu Polymer 1.0?

Answer 1

Im Moment gibt es keine direkte Möglichkeit, es zu tun. Sie sollten die doppelte Bindung manuell ausführen, indem Sie Änderungen in der foo-Eigenschaft des übergeordneten Elements abhören und das Ereignis foo-changed des programmgesteuerten Elements abhören.

<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> 

Sie hier ein funktionierendes Beispiel sehen kann: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

Answer 2

Leider denke ich, es ist nicht möglich, dies auf eine "saubere" Weise zu tun. Um den Pfadbeobachter zu ersetzen, müssen wir einen Link zu den "foo" -Wertänderungen an die dynamischen Elemente hinzufügen. Der erste Schritt ist die Beobachtung, dass sich der Eigenschaftswert "foo" ändert. Der zweite Schritt besteht darin, die Änderungen an den einzelnen erstellten dynamischen Elementen zu replizieren.

<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> 

Das gesamte Plunkr Beispiel: http://plnkr.co/edit/TSqcikNH5bpPk9AQufez