Não consigo acessar o elemento definido no outlet do plugin com a interface DOM

Dev
1

Eu usei o seguinte plug-in de saída para criar um botão abaixo do cabeçalho.

<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">
            fazer uma pergunta
        </span>
    </a>
</script>

Funciona perfeitamente. No entanto, agora quero acessá-lo com JavaScript para manipulá-lo, mas ao tentar obter o elemento com base no id vic-button, o console retorna apenas null.

Então, quando eu faço

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

recebo null como saída. Alguma ideia?

1 curtida
2

Provavelmente, o seletor está sendo executado antes que o template seja renderizado.

Você precisa fazer isso ‘no framework’.

A melhor abordagem seria transformar isso em um Componente do Ember e, em seguida, usar um hook como didInsertElement() para capturar o momento em que ele está disponível para modificação.

Lembre-se: isso é um aplicativo web, não uma página web. Os elementos são dinâmicos, não estáticos. O plugin outlet é, ele próprio, um Componente, portanto não é renderizado imediatamente.

3 curtidas
3

Faria algo assim?

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

Ao fazer isso, vejo uma saída repetida de null no console. Sou um completo iniciante, então apenas procurei no Meta por pessoas fazendo coisas semelhantes, mas provavelmente não estou no caminho certo.

4

Descobri:

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

A saída mostra o que eu queria. E agora posso manipular o elemento!

2 curtidas