Associazione dati in un elemento polimerico inserito dinamicamente

Question

Ci sono alcune volte in cui è necessario aggiungere un elemento personalizzato dinamicamente in un contesto. Poi:

• Il polimero inserita potrebbero ricevere alcune proprietà legate ad un'altra struttura all'interno del contesto, per cui può cambiare di conseguenza.

• A polymer 0.5 è possibile utilizzare PathObserver per associare una proprietà a una proprietà di contesto per un componente aggiunto di recente. Tuttavia, non ho trovato una soluzione alternativa o equivalente a polymer 1.0.

Ho creato un esempio per 0,5 e lo stesso per 1.0. Vedi sotto il codice del polimero che fa l'iniezione. Inoltre puoi vedere gli esempi completi di plunker per chiarezza.

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> 

prega, vedere la piena esempio plunkr: 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> 

prega, vedere l'esempio plunkr completo: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Conosci qualche soluzione alternativa o equivalente con il polimero 1.0?

Answer 1

In questo momento, non v'è alcun modo diretto per farlo. È necessario eseguire manualmente il doppio binding ascoltando le modifiche nella proprietà foo dell'elemento padre e ascoltando l'evento foo-changed dell'elemento creato a livello di codice.

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

si può vedere un esempio di lavoro qui: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview

Answer 2

Purtroppo penso che non sia possibile farlo in modo "pulito". Per sostituire il Path Observer, dobbiamo aggiungere il link sul valore "foo" per gli elementi dinamici. Il primo passo è osservare le modifiche al valore della proprietà "foo". Il secondo passo è replicare le modifiche ad ogni elemento dinamico creato.

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

vedere tutti i Plunkr esempio: http://plnkr.co/edit/TSqcikNH5bpPk9AQufez