Hi,
I am trying to run a custom function, when additional content to the page is added, (for long posts) using the following API:
api.onAppEvent('post-stream:refresh', () => {
console.log('New content to the page added ...');
});
… however, the above didn’t work. What am I doing wrong and what would be the correct way of doing it?
Can you share a little more about what you’re trying to achieve? There are a few different APIs that allow you to modify post content when it renders. The most common one would be api.decorateCookedElement
In fact, I just realized that I need to run the function on post content added to the DOM.
I am practically re-creating addPosterIcon API, because mine has to contain custom HTML. I have it already done everything working, except when the long page is being scrolled.
I am trying to add an icon next to the poster username, which triggers a custom event. The only problem is that it’s not getting yet added upon DOM change.
The problem with this method, is that it triggers multiple cooked objects at once and thus preferes an id (to avoid memory leaks), which is not something I need. What would worked for me, is if only one event was triggered after all elements are cooked. I have an idea on how it could be clutched but is there a proper way of doing it using Discourse API?
The decorateCookedElement api will be triggered once for each rendered post. The callback will be passed the DOM element containing the post content. The idea is that you only modify the element you’ve been passed, and not anything else on the page.
But since you want to make modifications to the metadata around the post content, decorateCookedElement probably isn’t the right option.
Then the best thing is probably to look at how the addPosterIcon API is implemented:
Under the covers it is a call to the api.decorateWidget function. You could make that call yourself, and then make it render raw HTML. For more information about the decorateWidget API, you can check https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6
The solution for me to have decorateCookedElement run only once for a specific type, and when the last cooked content is ready, was as simple as that:
<script type="text/discourse-plugin" version="0.11">
api.decorateCookedElement((callback, opts) => {
if(opts?.widget?.dirtyKeys?.name === 'post-stream') {
if(this?.cooking) clearTimeout(this.cooking);
this.cooking = setTimeout(() => {
console.log('All cooking is done, update new content..');
});
}
});
</script>
Please correct me if there is anything wrong or there are any pitfalls in this code.
抱歉在这个旧主题中添加一个问题。
我们之前使用上述代码（decorateCookedElement）在渲染附加帖子时调用一个简短的脚本函数。
使用 Glimmer 帖子流时，此代码无法正常工作。我们在开发者控制台中收到以下消息：
在使用 Glimmer 帖子流调用 api.decorateCookedElement 时，访问 helper.widget 不受支持，并可能产生意外结果。
因此，脚本函数未执行。
对于 Glimmer 帖子流，我们是否有相应的功能可以使用？
提前感谢您提供的任何有关调整我们编码的信息。