Pregunta Obtener elemento padre de polímero


Así que he estado usando Polymer durante aproximadamente un día y tengo problemas para formular esta pregunta, por lo que si mi enfoque está fuera de la base, no sienta la necesidad de solucionarlo, sino más bien apúnteme en la dirección correcta.

Lo que tengo son elementos personalizados dentro de elementos personalizados y me gustaría que un elemento secundario afecte los atributos de los padres. El enfoque que estoy tomando es crear un manejador de clics, cerrando el elemento padre en un IIFE, y luego pasar ese manejador al subcomponente. Al igual que...

Polymer({
  ready: function(){
     this.superHandler = (function(p) {
        return function() {
          // "this" here will be the sub-component
          p.title = this.title;
        }
     })(this);
  }
});

Donde el elemento padre lo usa en su plantilla como ...

<polymer-element name="parent-element">
  <template>
    <sub-element on-click={{superHandler}} />
  </template>
</polymer-element>

Esto (en mi código real, aunque es posible que haya errores ortográficos aquí) funciona en todo menos en IE, y sé que IE no es oficialmente compatible, pero está tan cerca que no quiero renunciar a él. Las cosas que quiero evitar son referencias repetidas a parentNodes y shadowRoots para llegar al padre que estoy buscando.

Editar

Olvidé mencionar cómo está fallando en IE y por qué quiero evitar la llamada parentNode. En IE, cuando va a despachar el evento específicamente en la línea 9131 de polymer.js, la variable "método" y la referencia en obj [método] son ​​cadenas en IE, por lo que no se aplica ningún método. La razón por la que deseo evitar el parentNode es porque el que llama no es el padre directo, por lo que no quiero seguir obteniendo parentNodes hasta que encuentre el correcto, ya que el código es mucho más comprensible cuando puedo nombrar la variable.

Editar 2

Lo que voy a hacer ahora (dado que funciona en IE9), aunque dejo la pregunta abierta para una mejor respuesta es continuar con el IIFE, devolviendo una función que toma un argumento que es el niño. Luego, el niño encontrará el padre de interés mediante un querySelector. Esto significa que el niño debe tener conocimiento previo del padre y el método para llamar, lo cual no es ideal, pero ... IE.

Entonces el padre lo configura como ...

Polymer('parent-element', {
  ready: function(){
     this.superHandler = (function(p) {
        return function(child) {
          p.title = chile.title;
        }
     })(this);
  }
});

Y el niño debe obtenerlo mediante un selector de consultas, digamos por 'parent-element' y conocer el nombre 'superHandler' (no el nombre real)

Polymer('child-element',{
        clickHandler: function(){
            var p = document.querySelector('parent-element').superHandler;
            p(this);
        }
    });

Mejores ideas?


12
2018-03-11 04:55


origen


Respuestas:


Puede usar eventos propios para pasar datos entre elementos.

Componente principal:

<polymer-element name="parent-element">
  <template>
    <!-- ... -->
    <sub-element></sub-element>
  </template>
  <script>
  Polymer({
    ready: function() {
      this.addEventListener('eventFromChild', this.myAction);
    },
    myAction: function(event) {
      console.log(event.detail);
    },
  });
  </script>

Componente infantil:

<polymer-element name="sub-element" attributes="foo bar">
  <template>
    <!-- ... -->
    <button on-click="{{passParams}}">Send</button>
  </template>
  <script>
  Polymer({
    ready: function() {
      this.foo = 'abc';
      this.bar = '123';
    },
    passParams: function() {
      this.fire('eventFromChild', { foo: this.foo, bar: this.bar });
    },
  });
</script>

16
2018-03-16 14:19



Aquí hay una manera simple de obtener acceso al elemento padre en Javascript. Esto funciona en un trabajo personal (polímero 0.5 - como se menciona en los comentarios, las cosas son diferentes en 1.0). No probado en IE, pero me parece una solución simple:

Polymer('sub-element', {
  ready: function(){
     this.parentNode;
  }
});

3
2018-03-11 08:51



Gracias por las sugerencias de eventos personalizados. Eso me hizo volver y mirar los elementos centrales nuevamente para encontrar esta.

Entonces solo necesito agregar un

<core-signals on-core-signal-my-event="{{myEventHandler}}"></core-signals>

Dispare un evento de "señal central" con un nombre de (en este ejemplo) "mi-evento" y cree un método "myEventHandler" en el elemento primario, p.

Polymer({
  myEventHandler: function(e,detail,sender) {...}
})

1
2018-03-16 14:57



Debido a la naturaleza de un componente, dudo de acceder al parentNode de esta manera. Si necesita un estilo, puede hacerlo sin usar el :host() reglas de css. En mi humilde opinión, parece repugnante llegar al elemento principal a menos que tenga una buena razón. ¿Por qué no usar un evento personalizado o una tienda intermedia como localStorage?

También echa un vistazo "La lista de verificación 'Gold Standard' para los componentes web" para obtener ayuda adicional sobre las mejores prácticas.


0
2018-03-12 10:10