Enlace de datos en un elemento polimérico insertado dinámicamente
Hay ocasiones en que podríamos necesitar agregar un elemento personalizado dinámicamente en un contexto. Entonces:
El polímero insertado podría recibir algunas propiedades unidas 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 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 realiza la inyección. También puede 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 o equivalente con el polímero 1.0?