Impossible d'accéder à l'élément défini dans l'outlet du plugin avec l'interface DOM

Dev
1

J’ai utilisé le plug-in suivant pour créer un bouton sous l’en-tête.

<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">
            poser une question
        </span>
    </a>
</script>

Cela fonctionne parfaitement. Cependant, je souhaite maintenant y accéder via JavaScript pour le manipuler, mais lorsque j’essaie de récupérer l’élément en utilisant l’id vic-button, la console renvoie simplement null.

Ainsi, lorsque j’exécute

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

j’obtiens null comme résultat. Des idées ?

2

C’est probablement parce qu’il exécute votre sélecteur avant que le modèle ne soit rendu.

Vous devez le faire « dans le framework ».

La meilleure approche serait de transformer cela en un composant Ember, puis d’utiliser un hook comme didInsertElement() pour capturer le moment où il est disponible pour modification.

Rappelez-vous qu’il s’agit d’une application web et non d’une page web. Les éléments sont dynamiques, pas statiques. Le point d’insertion du plugin est lui-même un composant, il n’est donc pas rendu immédiatement.

3

Est-ce que je ferais quelque chose comme ça ?

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

Lorsque je fais cela, une sortie null répétée s’affiche dans la console. Je suis un grand débutant, alors j’ai simplement cherché sur Meta des personnes faisant des choses similaires, donc c’est probablement pas la bonne voie.

4

J’ai trouvé :

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

La sortie affiche ce que je voulais. Et maintenant, je peux manipuler l’élément !