Kann nicht auf Element zugreifen, das im Plugin-Outlet mit der DOM-Schnittstelle definiert ist

Entwickler
1

Ich habe den folgenden Plug-in-Outlet verwendet, um eine Schaltfläche unter dem Header zu erstellen.

<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">
            eine Frage stellen
        </span>
    </a>
</script>

Es funktioniert einwandfrei. Jetzt möchte ich jedoch per JavaScript darauf zugreifen, um es zu manipulieren. Wenn ich versuche, das Element basierend auf der id vic-button abzurufen, gibt die Konsole jedoch null zurück.

Wenn ich also

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

ausführe, erhalte ich als Ausgabe null. Hat jemand eine Idee?

1 „Gefällt mir“
2

Es läuft wahrscheinlich deinen Selektor aus, bevor das Template gerendert wurde.

Du musst dies „im Framework“ tun.

Der beste Ansatz wäre, dies in eine Ember-Komponente umzuwandeln und dann einen Hook wie didInsertElement() zu verwenden, um den Zeitpunkt zu erfassen, an dem es verfügbar ist, um Änderungen vorzunehmen.

Denke daran: Dies ist eine Web-App, keine Webseite. Elemente sind dynamisch, nicht statisch. Der Plugin-Outlet ist selbst eine Komponente und wird daher nicht sofort gerendert.

3 „Gefällt mir“
3

Würde ich so etwas machen?

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

Wenn ich das tue, wird wiederholt null in der Konsole ausgegeben. Ich bin ein kompletter Anfänger und habe einfach versucht, auf Meta nach Leuten zu suchen, die Ähnliches tun, aber das ist wahrscheinlich nicht der richtige Weg.

4

Ich habe es herausgefunden:

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

Die Ausgabe zeigt genau das, was ich brauche. Und jetzt kann ich das Element manipulieren!

2 „Gefällt mir“