플러그인 아웃렛에 정의된 요소를 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이 반환됩니다. 어떤 아이디어라도 있을까요?

2

아마도 템플렌트가 렌더링되기 전에 선택자를 실행하고 있는 것 같습니다.

이것은 ‘프레임워크 안에서’ 수행해야 합니다.

가장 좋은 접근 방식은 이를 Ember 컴포넌트로 전환한 다음, didInsertElement()와 같은 훅을 사용하여 수정할 수 있는 시점을 포착하는 것입니다.

이것은 웹 페이지가 아니라 웹 애플리케이션임을 기억하세요. 요소는 정적이 아니라 동적입니다. 플러그인 아웃렛 자체가 컴포넌트이므로 즉시 렌더링되지 않습니다.

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

출력이 제가 원하는 것을 보여줍니다. 이제 요소를 조작할 수 있습니다!