Impossibile accedere all'elemento definito nell'outlet del plugin con l'interfaccia DOM

Sviluppatore
1

Ho utilizzato il seguente plug-in outlet per creare un pulsante sotto l’intestazione.

<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">
            fai una domanda
        </span>
    </a>
</script>

Funziona perfettamente. Tuttavia, ora voglio accedervi con JavaScript per manipolarlo, ma quando provo a ottenere l’elemento in base all’id vic-button, la console restituisce semplicemente null.

Quindi, quando eseguo

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

ottengo null come output. Qualche idea?

2

Probabilmente sta eseguendo il selettore prima che il template sia stato renderizzato.

Devi farlo ‘all’interno del framework’.

L’approccio migliore sarebbe trasformare questo in un Componente Ember, quindi utilizzare un hook come didInsertElement() per catturare il momento in cui è disponibile per la modifica.

Ricorda che si tratta di un’applicazione web, non di una pagina web. Gli elementi sono dinamici, non statici. L’outlet del plugin è esso stesso un Componente, quindi non viene renderizzato immediatamente.

3

Farei qualcosa di simile?

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

Quando lo faccio, ottengo un’uscita null ripetuta nella console. Sono un completo principiante, quindi ho solo cercato su Meta persone che fanno cose simili, quindi probabilmente non è la strada giusta.

4

L’ho capito:

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

L’output mostra ciò che volevo. E ora posso manipolare l’elemento!