javascript - observer - polymer set

Elemento de envoltura de texto con enlace en Polymer 1.0

Question

Creé un componente web personalizado con Polymer, que envuelve el texto y lo altera ligeramente (transformándolo en mayúsculas en esta prueba de concepto).

El elemento en sí funciona bien con contenido estático. Sin embargo, cuando el contenido está dinámicamente enlazado, el componente no puede mostrar el contenido.

Por ejemplo:

<my-wrapper>Hello, World!</my-wrapper> <!-- Works -->
<my-wrapper>[[someText]]</my-wrapper> <!-- Doesn''t work -->

Actualmente estoy usando observeNodes , que logra activar la transformación de texto inicial, pero no puede activar cambios subsecuentes.

Mi prototipo actual se define como:

<dom-module id="my-wrapper">
<template>
<span id="placeholder"></span>
</template>
<script>
Polymer({
is: ''my-wrapper'',
ready: function() {
var self = this;
Polymer.dom(Polymer.dom(this)).observeNodes(function(info) {
self.$.placeholder.textContent = info.target.textContent.toUpperCase();
});
/*var mutationObserver = new MutationObserver(function(e) {
console.log(e);
});
mutationObserver.observe(this.root, {characterData: true, childList: true});*/
},
});
</script>
</dom-module>

Y un JSBin en funcionamiento para el problema antes mencionado se puede encontrar aquí: http://jsbin.com/jumewuzuho/1/edit?html,console,output .

¿Alguna sugerencia sobre cómo capturar el cambio del contenido (DOM ligero) para que pueda volver a transformar el texto?

Como puede ver en el bloque de código comentado, ya he intentado usar MutationObserver, pero no pude crear un prototipo funcional. Supongo que no usé el nodo correcto ( this.root en mi caso).

Answer 1

No creo que ObserveNodes (o MutationObserver ) sean la mejor manera de abordar esto. ObserveNodes rastrea cuando se agregan y eliminan nodos ObserveNodes de su elemento.

En su caso, los nodos DOM no se agregan ni eliminan, simplemente es el texto interno del elemento que está cambiando. Esos cambios no son recogidos por ObserveNodes .

Recomendaría otro enfoque que, en mi modesta opinión, está más alineado con la forma de hacer polímeros del polímero, usando la etiqueta de content :

Para soportar la composición del DOM ligero de un elemento con su DOM local, Polymer admite el elemento de contenido. El elemento de content proporciona un punto de inserción en el que el DOM ligero de un elemento se combina con su DOM local

Utilizaría la etiqueta de contenido para crear un punto de inserción y luego lo diseñaría a través de un DOM sombreado (texto-transformación: mayúscula):

<dom-module id="my-wrapper">
<template>
<style>
:host {
text-transform: uppercase;
}
</style>
<content></content>
</template>
<script>
Polymer({
is: ''my-wrapper''
});
</script>
</dom-module>