Как правильно слушать обновление post-stream

Разработка
1

Привет,

Я пытаюсь выполнить пользовательскую функцию при добавлении дополнительного контента на страницу (для длинных постов), используя следующий API:

api.onAppEvent('post-stream:refresh', () => {
       console.log('На страницу добавлен новый контент ...');
});

Однако это не сработало. Что я делаю не так и какой будет правильный способ решения этой задачи?

2

Можете рассказать немного подробнее, чего вы пытаетесь добиться? Существует несколько различных API, которые позволяют изменять содержимое поста при его отображении. Наиболее распространенным из них является api.decorateCookedElement.

3

На самом деле я только что осознал, что мне нужно запускать функцию для контента постов, добавляемого в DOM.

По сути, я воссоздаю API addPosterIcon, так как мое решение должно содержать кастомный HTML. Я уже всё реализовал, и всё работает, кроме одного случая: при прокрутке длинной страницы.

Я пытаюсь добавить иконку рядом с именем пользователя-автора, которая вызывает пользовательское событие. Единственная проблема в том, что иконка пока не добавляется при изменениях в DOM.

4

Проблема этого метода в том, что он вызывает множество обработанных объектов одновременно и поэтому предпочитает использование идентификатора (чтобы избежать утечек памяти), что мне не нужно. Мне подошло бы, если бы одно событие срабатывало только после того, как все элементы будут обработаны. У меня есть идея, как это можно реализовать, но есть ли правильный способ сделать это с помощью API Discourse?

5

API decorateCookedElement будет вызываться один раз для каждого отрендеренного поста. В колбэк будет передан DOM-элемент, содержащий содержимое поста. Суть в том, что вы должны изменять только переданный вам элемент, а не что-либо ещё на странице.

Однако, поскольку вы хотите вносить изменения в метаданные вокруг содержимого поста, decorateCookedElement, вероятно, не подходит.

В таком случае, скорее всего, лучше всего изучить, как реализован API addPosterIcon:

Внутри это вызов функции api.decorateWidget. Вы можете сделать этот вызов самостоятельно, а затем заставить его рендерить необработанный HTML. Для получения дополнительной информации об API decorateWidget ознакомьтесь с https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6.

6

Решение для меня, чтобы decorateCookedElement выполнялся только один раз для конкретного типа и когда готово последнее обработанное содержимое, было таким простым:

<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('Все обработано, обновляем новый контент..');
          });
      }
  });
</script>

Поправьте меня, если в этом коде есть какие-либо ошибки или подводные камни.

7

Извините, что задаю вопрос в этой старой теме.

Мы использовали упомянутый выше код (decorateCookedElement) для вызова короткой функции скрипта при рендеринге дополнительных сообщений в теме.

С потоком постов Glimmer этот код работает некорректно. В консоли разработчика мы видим следующее сообщение:

Accessing helper.widget is not supported when using api.decorateCookedElement with the Glimmer Post Stream and can yield unexpected results.

В результате функция скрипта не выполняется.

Существует ли аналогичная функция, которую мы можем использовать для потока постов Glimmer?

Заранее спасибо за любую информацию, которая поможет нам адаптировать наш код.