binding - imagen - Enlace de datos en un elemento polimérico insertado dinámicamente

atributo title de la imagen

Question

Hay ocasiones en las que podríamos necesitar agregar un elemento personalizado dinámicamente a un contexto. Entonces:

• El polímero insertado podría recibir algunas propiedades vinculadas a otra propiedad dentro del contexto, por lo que puede cambiar en consecuencia.

• En el polímero 0.5 podríamos usar PathObserver para vincular una propiedad a una propiedad de contexto para un componente agregado recientemente. Sin embargo, no encontré una solución alternativa o equivalente en el polímero 1.0.

He creado un ejemplo para 0.5 y lo mismo para 1.0. Vea a continuación el código del polímero que hace la inyección. También puedes ver los ejemplos completos de plunker para mayor claridad.

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>

Por favor, vea el ejemplo completo de 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>

Por favor, vea el ejemplo completo de plunkr: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

¿Conoces alguna solución temporal o equivalente con el polímero 1.0?

Answer 1

Desafortunadamente, creo que no es posible hacerlo de una manera "limpia". Para reemplazar el Path Observer, tenemos que agregar un enlace en los cambios de valores "foo" a los elementos dinámicos. El primer paso es observar los cambios en el valor de la propiedad "foo". El segundo paso es replicar los cambios en cada elemento dinámico creado.

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

Vea el ejemplo completo de Plunkr: http://plnkr.co/edit/TSqcikNH5bpPk9AQufez

Answer 2

En este momento, no hay una forma directa de hacerlo. Debe realizar manualmente el doble enlace escuchando los cambios en la propiedad foo del elemento principal y escuchando el evento foo-changed del elemento creado mediante programación.

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

Puede ver un ejemplo de trabajo aquí: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview