プラグインのアウトレットで定義された要素にDOMインターフェースでアクセスできない

開発
1

以下のプラグインアウトレットを使用して、ヘッダーの下にボタンを作成しました。

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

これは問題なく動作しています。しかし、現在これを JavaScript からアクセスして操作したいと考えています。id が vic-button の要素を取得しようとすると、コンソールは null を返してしまいます。

そのため、以下を実行すると

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

出力は null になります。何か解決策はありますでしょうか？

「いいね！」 1
2

おそらく、テンプレートがレンダリングされる前にセレクターが実行されているのでしょう。

これは「フレームワーク内」で行う必要があります。

最適なアプローチは、これを Ember コンポーネントに変換し、didInsertElement() などのフックを使用して、変更可能なタイミングを捕捉することです。

これはウェブページではなくウェブアプリケーションであることに注意してください。要素は静的ではなく動的です。プラグインOutlet自体もコンポーネントであるため、すぐにレンダリングされません。

「いいね！」 3
3

このような方法でよいでしょうか？

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

このようにすると、コンソールに null が繰り返し出力されてしまいます。私は完全に初心者なので、meta で似たようなことをしている人を探して試してみただけですが、おそらくこの方向性は正しくないのでしょう。

4

わかりました：

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

出力は私が望むものとなっています。これで要素を操作できます！

「いいね！」 2