无法访问插件插槽中定义的元素（使用 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() 这样的钩子函数，在元素可用时进行捕获和修改。

请记住，这是一个 Web 应用，而非静态网页。元素是动态的，而非静态的。插件出口（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);
       }
    );

输出显示了我想要的结果。现在我可以操作这个元素了！