Powiązanie danych w dynamicznie wstawianym elemencie polimerowym

Question

Czasami potrzebujemy dynamicznie dodawać element niestandardowy do kontekstu. Następnie:

• Wstawiony polimer może otrzymywać niektóre właściwości związane z innym własności wewnątrz kontekście, dzięki czemu może się odpowiednio zmieniać.

• Przy 0,5 polimeru możemy użyć PathObserver do powiązania właściwości z właściwością kontekstu dla ostatnio dodanego komponentu. Jednak nie znalazłem rozwiązania zastępczego lub jego odpowiednika na polimer 1.0.

Stworzyłem przykład dla 0.5 i tak samo dla 1.0. Zobacz poniżej kod polimeru, który wykonuje wstrzyknięcie. Również możesz zobaczyć pełne przykłady plunker dla jasności.

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> 

Należy znaleźć pełnego plunkr przykład: 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> 

Należy znaleźć pełnego plunkr przykład: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Czy znasz jakieś obejście lub odpowiednik dla polimeru 1.0?

Answer 1

Teraz nie ma bezpośredni sposób to zrobić. Należy ręcznie wykonać podwójne wiązanie, nasłuchując zmian właściwości foo elementu nadrzędnego i nasłuchując zdarzenia foo-changed elementu utworzonego programowo.

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

można zobaczyć przykład pracuje tu: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

Answer 2

Niestety uważam, że nie można tego zrobić w "czysty" sposób. Aby zastąpić Path Observer, musimy dodać link do zmian wartości "foo" w elementach dynamicznych. Pierwszym krokiem jest obserwacja zmian wartości właściwości "foo". Drugim krokiem jest skopiowanie zmian do wszystkich utworzonych elementów dynamicznych.

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

Zobacz pełną przykład Plunkr: http://plnkr.co/edit/TSqcikNH5bpPk9AQufez