Есть ли лучший способ сделать ajax-запрос из компонента темы?

Разработка
1

Я создал компонент темы, который отображается при просмотре профиля пользователя. Он отправляет AJAX-запрос на отдельный веб-сайт (которым я управляю), чтобы проверить, есть ли у пользователя Discourse аккаунт там (передавая ID пользователя Discourse в URL). Если аккаунт есть, он отображает ссылку на него.

Это работает, но я почти уверен, что это ужасный хак, от которого у разработчика Discourse свело бы живот! Поэтому я хотел спросить, есть ли лучший способ это сделать? Я разработчик JavaScript и Ruby, но никогда не работал с Ember (использовал Vue, Backbone и React).

<script type="text/discourse-plugin" version="0.8.7">
    const {ajax} = require('discourse/lib/ajax')

    api.registerConnectorClass('user-profile-primary', 'custom-profile-link', {
      setupComponent(args, component) {
        args.model.get('fetchPersonnelMember')
      }
    })
    
    api.modifyClass('model:user', {
      fetchPersonnelMember: function () {
        console.log('running!', ajax)
        const urlTemplate = settings.personnel_lookup_url // например, "https://api.29th.org/members?discourse_id=%s"

        const url = urlTemplate.replace(/%s/, this.id)
        return ajax(url).then((result) => {
            if (result.status == true && result.member.id) {
              this.setProperties({personnelMember: result.member})
            }
          })
      }.property('id'),
      
      personnelLinkUrl: function () {
        if (this.personnelMember) {
          const viewUrlTemplate = settings.personnel_view_url // например, "https://personnel.29th.org/#members/%s"
          return viewUrlTemplate.replace(/%s/, this.personnelMember.id)
        }
      }.property('personnelMember'),
      
      personnelLinkName: function () {
        return this.personnelMember ? this.personnelMember.short_name : ''
      }.property('personnelMember')
    })
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/custom-profile-link'>
  {{#if model.personnelLinkUrl}}
    <div class="public-user-fields">
      <div class="public-user-field">
        <span class="user-field-name">
          {{theme-setting 'personnel_label'}}
        </span>
        <span class="user-field-value">
          <a href="{{{model.personnelLinkUrl}}}">{{model.personnelLinkName}}</a>
        </span>
      </div>
    </div>
  {{/if}}
</script>

Я взял это в основном из (Retired) Use an ID in a custom user field to link to a user's external profile - #24 by LeoMcA. Мне кажется, главная проблема в том, что я использую вычисляемое свойство для запуска асинхронной функции, что является плохой практикой. Вместо этого я должен запускать этот асинхронный запрос в каком-то хуке «при загрузке» (но только когда я нахожусь на странице профиля пользователя).

Также мне кажется, что я немного изобретаю велосипед с форматом шаблона переменных. В идеале я хотел бы сделать это подключаемым плагином, которым я мог бы поделиться, поэтому было бы здорово, если бы настройки выглядели больше как шаблон Handlebars, например https://mysite.com/members/{{id}}, но я не нашел никаких утилит или помощников для этого в коде Discourse.

Буду рад вашим отзывам! Спасибо за ваше время.

2

Надеюсь, что топик поднимать нормально, потому что мне очень нужна помощь в этом вопросе :slight_smile:

3

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

Кажется, есть компонент темы, который добавляет дополнительные списки тем в верхней части страницы, как это делает Feverbee. Возможно, там есть нужный вам пример.