Невозможно получить доступ к элементу, определенному в плагин-аутлете, через 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">
            задать вопрос
        </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. Есть какие-нибудь идеи?

2

Скорее всего, ваш селектор выполняется до того, как шаблон будет отрендерен.

Вам нужно сделать это «в рамках фреймворка».

Лучший подход — превратить это в компонент Ember, а затем использовать хук, например didInsertElement(), чтобы перехватить момент, когда элемент становится доступным для изменения.

Помните, что это веб-приложение, а не веб-страница. Элементы динамические, а не статические. Сам выход плагина (plugin outlet) является компонентом, поэтому он не рендерится сразу.

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);
       }
    );

Вывод показывает именно то, что мне нужно. И теперь я могу манипулировать элементом!