واجهت بعض المشاكل عند إدراج iframes باستخدام Ember API الخاص بـ Discourse

مطور
1

يضع المكون الإضافي i-frame في Discourse و يمكنك العثور عليه هنا

أحافظ عليه محدثًا قدر الإمكان لأحدث إصدار، لذا جاء التغيير المكسور مؤخرًا. نحن حاليًا نستخدم الإصدار 3.3.0.beta1-dev.

في وحدة التحكم، أحصل على 3 رسائل خطأ تبدو كالتالي:

docuss.js:225 Uncaught (in promise) ReferenceError: Ember is not defined
at docuss.js:225:1

على الأرجح تم إزالة كائن Ember هذا من واجهة برمجة تطبيقات Discourse في إصدار حديث من Discourse، لذا يأتي هذا الخطأ بعد ترقية Discourse التي تؤثر على تلك الكائنات.

إليك كل الإصلاحات التي قمت بها:

التغيير 1

assets\javascripts\discourse\initializers\docuss.js.es6
السطر 232

قديم:

const afterRender = res =>
  new Promise(resolve => {
    // @ts-ignore
    Ember.run.schedule('afterRender', null, () => resolve(res))

جديد:

import { schedule } from '@ember/runloop'

const afterRender = res =>
  new Promise(resolve => {
     schedule('afterRender', null, () => resolve(res))
  })

التغيير 2

assets\javascripts\discourse\lib\DcsIFrame.js.es6
السطر 858

قديم:

  const afterRender = res =>
	new Promise(resolve => {
		Ember.run.schedule('afterRender', null, () => resolve(res))
	})

جديد:

	import { schedule } from '@ember/runloop'

	const afterRender = res =>
	  new Promise(resolve => {
		schedule('afterRender', null, () => resolve(res))
	  })

التغيير 3

assets\javascripts\discourse\lib\onDidTransition.js.es6
السطر 239

قديم:

const afterRender = res =>
  new Promise(resolve => {
    Ember.run.schedule('afterRender', null, () => resolve(res))

جديد:

import { schedule } from '@ember/runloop'

const afterRender = res =>
  new Promise(resolve => {
      schedule('afterRender', null, () => resolve(res))

لقد أدى ذلك إلى مسح جميع رسائل الخطأ في وحدة التحكم ولكنه أنشأ سلسلة من الرسائل الجديدة:

 Discourse v3.3.0.beta1-dev — https://github.com/discourse/discourse/commits/4c7d58a883 — Ember v5.5.0
app.js:197 Uncaught ReferenceError: Ember is not defined
    at s.callback (docuss.js:210:1)
    at s.exports (loader.js:106:1)
    at requireModule (loader.js:27:1)
    at y (app.js:171:18)
    at w (app.js:194:19)
    at app.js:157:29
    at e.start (app.js:51:5)
    at HTMLDocument.<anonymous> (start-app.js:5:7)
    at discourse-boot.js:20:12
    at discourse-boot.js:1:1

إليك منصة مباشرة مع تشغيل المكون الإضافي في حال كان مفيدًا

هل هذه المشكلة مألوفة لأي شخص واجه مشاكل مع تغيير كائنات واجهة برمجة تطبيقات Ember. أي اقتراحات حول كيفية إصلاحها ستكون محل تقدير كبير.

إعجابَين (2)
2

مرحباً!

لقد نسيت هذا:

أعتقد أنه يمكنك فعل شيء كهذا. لا يزال هذا يجب أن يعمل.

import { observes } from "discourse-common/utils/decorators";

@observes("model.tags")
tagsChanged() {

}

على صعيد آخر، تم نقل وحدة تحكم المؤلف إلى خدمة الآن.

4 إعجابات
3

هل اطلعت على البديل الموصى به من صفحة GitHub؟

أعتقد أن المؤلف نشط هنا.

إعجاب واحد (1)
4

شكراً على الاقتراح @Heliosurge. لقد قمنا بدمج القديم بعمق في مشروعنا، لذا بموافقة المؤلف، تولىنا صيانته.
لكننا نعاني من نقص في المطورين ذوي المهارات ذات الصلة في مجتمع المصادر المفتوحة لدينا في الوقت الحالي.

إعجاب واحد (1)
5

نعم، هذا منطقي تمامًا.

إعجاب واحد (1)
6

شكراً لك @Arkshine. توفي جهاز الكمبيوتر المحمول الخاص بي عندما قام شاحن بديل بإتلاف دائرة الشحن، لذلك لم أتمكن من اختباره حتى تمكنت من إصلاح الكمبيوتر المحمول أمس.

لقد وضعت عبارة الاستيراد في أعلى الصفحة ورمزك أسفلها ولكن يبدو أنني أواجه أخطاء في بناء الجملة عندما أحاول إضافة ذلك أو أشكال مشابهة له:

يجد Visual Basic Studio هذه الأخطاء:

// دالة tagsChanged الجديدة مع المزخرف @observes
@observes("model.tags")
tagsChanged() {
  // انظر إذا كانت علامة بالون

القوس المفتوح في نهاية هذا السطر: tagsChanged() {
لديه رسالة الخطأ هذه:
‘;’ متوقع.ts(1005)

  1. القوس الأخير في الكود لديه أيضًا علامة خطأ مع هذه الرسالة:
    ‘}’ متوقع.ts(1005)
    docuss.js.es6(219, 54): توقع المحلل العثور على ‘}’ لمطابقة رمز ‘{’ هنا.

هذا هو السطر 219:
tagsChanged: Ember.observer('model.tags', function() {

يقول خادمي هذا عندما أحاول البناء:

  251 |     }, 0);
  252 |   }
> 253 | }.observes("model.tags"),
      |                          ^
        in /tmp/broccoli-6523ExbXtskE5c0h/out-1067-funnel
        at Babel (Babel: discourse-plugins)
  - name: Error
  - nodeAnnotation: Babel: discourse-plugins
  - nodeName: Babel
  - originalErrorMessage: /var/www/discourse/app/assets/javascripts/discourse/discourse/plugins/docuss/discourse/initializers/docuss.js: Unexpected token (253:25)
7

لا أستطيع أن أرى السبب، لكنني لم أتمكن أبدًا من جعل هذا الإصلاح يعمل، أو عددًا من التغييرات عليه، وهو أمر غريب لأنه عمل على الملفات الأخرى بشكل جيد. لقد تحول تركيزي لبعض الوقت ولكنه كان يزعجني.

بالنظر إليه الآن ولا أرى ما الذي يسبب المشكلة. لقد أعدته إلى الأصل. هل يمكن لأي شخص أن يرى ما يجب تغييره هنا للتحديث إلى واجهة برمجة تطبيقات Ember الجديدة؟

8

إليك بعض النقاط الهامة:

  • تم نقل إعدادات الموقع إلى خدمة:

    const siteSettings = container.lookup('service:site-settings');
if (!siteSettings.docuss_enabled) {
  return;
}

  • location:discourse-location → location:history

  • afterRender().then(() => onAfterRender(container));
    afterRender هو مُزين تضعه فوق دالة في فئة المكون؛ لا يُفترض استخدامه مباشرة كدالة.
    أعتقد أنك تريد (لا يبدو أنه ضروري)، ربما:

    import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))

  • لديك جزء كبير من التعليمات البرمجية خارج دالة composeStateChanged، على ما يبدو.
    أيضًا، يمكنك استخدام خدمة الموجه هنا: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);

  • تم تحديث الواجهة الأمامية. تخصيص في أداة home-logo مهمل في سياقك. مزيد من المعلومات هنا: Upcoming Header Changes - Preparing Themes and Plugins.
    في حالتك، ستحتاج إلى إعداد glimmer header mode إلى auto أو enabled. بعد ذلك، يمكنك استخدام منفذ إضافة لاستبدال المحتوى:

    api.renderInOutlet("home-logo-contents", `<template>
    <HomeLogoContents
      @logoSmallUrl={{container.dcsHeaderLogo._smallLogoUrl}}
      @logoUrl={{container.dcsHeaderLogo._logoUrl}}
      @minimized={{@outletArgs.minimized}}
      @mobileLogoUrl={{container.dcsHeaderLogo._mobileLogoUrl}}
      @showMobileLogo={{@outletArgs.showMobileLogo}}
      @title={{@outletArgs.title}}
    />
  </template>`);

    ملاحظة: لاستخدام صيغة template في glimmer، تأكد من تغيير امتداد الملف إلى .gjs.
    يمكنك أيضًا استخدام هذه الطريقة:

     api.registerValueTransformer("home-logo-image-url", (transformer) => {
    let url = transformer.value;
    if (transformer.context.name === 'logo') {
      url = container.dcsHeaderLogo._logoUrl;
    } else if (transformer.context.name === 'logo_small') {
      url = container.dcsHeaderLogo._smallLogoUrl;
    } else if (transformer.context.name === 'logo_mobile') {
      url = container.dcsHeaderLogo._mobileLogoUrl;
    }
    return url;
  });

    لتغيير عنوان URL:

    api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);

    ملاحظة: أعتقد أن التعليمات البرمجية لإعادة التصيير في setLogo لن تعمل على مكون glimmer.

    ملاحظة بعد الاختبار: ومع ذلك، لن تعمل أي من الحلين لأن الواجهة الأمامية يتم تصييرها قبل أن تتمكن من الحصول على الشعارات من JSON. ليس لدي حل جاهز لذلك. لست متأكدًا مما إذا كانت هناك طريقة أفضل: سأنقل تحميل JSON إلى خدمة وأتتبع النتيجة. ثم، استخدم منفذ الإضافة أعلاه مع مكون glimmer. بهذه الطريقة، بناءً على متغير تتبع، يمكنك تشغيل تحديث على المكون تلقائيًا.

    مع ذلك، يعمل الأمر بطريقة ما. لا تزال هناك أجزاء غير عاملة مثل المنشئ. لم أتعمق في هذا. على الأقل، لم يعد هناك خطأ مانع. :slightly_smiling_face:

    آمل أن يكون هذا مفيدًا.

3 إعجابات
9

هذا مفيد جدًا، شكرًا لك :slight_smile:

إعجاب واحد (1)