No se puede acceder al elemento definido en el outlet del plugin con la interfaz DOM

Desarrollador
1

Utilicé el siguiente complemento de outlet para crear un botón debajo del encabezado.

<script type="text/x-handlebars" data-template-name="/connectors/below-site-header/vic-button">
    <a id="vic-button" href="http://mathbymiles.com/new-topic?title=&body=&category=uncategorized&tags=" class="btn btn-default">
        <span class="d-button-label">
            hacer una pregunta
        </span>
    </a>
</script>

Funciona perfectamente. Sin embargo, ahora quiero acceder a él con JavaScript para manipularlo, pero cuando intento obtener el elemento basado en el id vic-button, la consola simplemente devuelve null.

Así que cuando hago

<script type="text/discourse-plugin" version="0.8">
    const button = document.getElementById('vic-button');
    console.log(button);
</script>

obtengo null como salida. ¿Alguna idea?

1 me gusta
2

Probablemente se está ejecutando el selector antes de que se haya renderizado la plantilla.

Necesitas hacer esto “dentro del framework”.

La mejor aproximación sería convertir esto en un componente de Ember y luego usar un hook como didInsertElement() para capturar el momento en que está disponible para ser modificado.

Recuerda que esto es una aplicación web, no una página web. Los elementos son dinámicos, no estáticos. El plugin outlet es en sí mismo un componente, por lo que no se renderiza inmediatamente.

3 Me gusta
3

¿Haría algo así?

<script type="text/discourse-plugin" version="0.8">
    api.modifyClass('component:plugin-outlet', {
      didInsertElement() {
        this._super(...arguments);

        const button = document.getElementById('vic-button');
        console.log(button);
      },
    });
</script>

Cuando hago esto, hay una salida repetida de null en la consola. Soy un completo novato, así que solo intenté buscar en Meta a personas que hagan cosas similares, así que probablemente este no sea el camino correcto.

4

¡Lo resolví!

api.decoratePluginOutlet(
       "below-site-header",
       (elem, args) => {
           const button = document.getElementById('vic-button');
           console.log(button);
       }
    );

La salida muestra lo que quería. ¡Y ahora puedo manipular el elemento!

2 Me gusta