是否有更好的方法从主题组件发出 ajax 请求？

开发
1

我构建了一个主题组件，在查看用户个人资料时渲染。它会向一个我控制的独立网站发起 Ajax 请求，以检查该 Discourse 用户是否拥有该网站的账户（将 Discourse 用户 ID 放在 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 的做法。它可能包含您需要的示例。