هل هناك طريقة أفضل لعمل طلب ajax من مكون سمة؟

مطور
1

لقد بنيت مكونًا للمظهر (theme component) يتم عرضه عند عرض ملف تعريف مستخدم. يقوم هذا المكون بإجراء طلب AJAX إلى موقع ويب منفصل (أنا أتحكم فيه) للتحقق مما إذا كان المستخدم في Discourse لديه حساب هناك (بإرسال معرف المستخدم من Discourse ضمن الرابط). إذا كان الأمر كذلك، فإنه يعرض رابطًا إلى حساب المستخدم على ذلك الموقع.

الشيء يعمل، لكنني متأكد تقريبًا من أنه حيلة سيئة قد تجعل مطور 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 // e.g. "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 // e.g. "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. تخميني هو أن المشكلة الرئيسية هي أنني أستخدم خاصية محسوبة (computed property) لتشغيل دالة غير متزامنة (async function)، وهو أمر غير مسموح به. بدلاً من ذلك، يجب أن أقوم بتشغيل هذا الطلب غير المتزامن في نوع من “خطاف التحميل” (on load hook) (ولكن فقط عندما أكون في صفحة ملف تعريف المستخدم).

أشعر أيضًا أنني أعيد اختراع العجلة قليلاً مع تنسيق القالب للمتغيرات. بشكل مثالي، سأجعل هذا مكون إضافة قابل للتكوين أشاركه، لذا سيكون من الجيد أن تبدو الإعدادات أكثر مثل قالب Handlebars، على سبيل المثال https://mysite.com/members/{{id}}، لكنني لم أر أي أدوات أو مساعدات (helpers) لهذا الغرض في قاعدة كود Discourse.

أرحب بردودكم! شكرًا لكم على وقتكم.

2

آمل أن يكون التنبيه مقبولاً، لأنني أستطيع حقاً أن أستخدم توجيهك في هذا الأمر :slight_smile:

3

إذا كان بإمكانك استخدام إضافة بدلاً من ذلك، أقوم بإجراء الطلب من جانب الخادم (وأقوم بتخزين البيانات إذا كانت مستقرة) وأضيف الرابط إلى المصمم.

أعتقد أن هناك مكونًا في السمة يضيف قوائم مواضيع أخرى في أعلى الصفحة مثل ما يفعله Feverbee. قد يحتوي على المثال الذي تحتاجه.