كيف أستخدم الصور من الأصول (assets) في HTML لمكون سمة قائم على Glimmer؟

مطور
1

Include assets (e.g. images, fonts) in themes and components يبدو أنه لا يزال يشير إلى الطريقة القديمة (handlebars)، إذا كنت أفهم بشكل صحيح. هل طريقة Glimmer الجديدة متاحة بالفعل لجعل الصور من دليل assets الخاص بمكون السمة قابلة للاستخدام في قالب HTML الخاص بنفس مكون السمة؟

حالة الاستخدام الخاصة بي هي استبدال مكون السمة القديم المعطّل الموصوف في Templating of my "component" broke. How do I fix it?.

ما جربته

لقد قمت بإنشاء مشروع مكون سمة جديد باستخدام discourse_theme new discourse-tc-geowebforum-sponsors ثم حاولت محاكاة المكون الإضافي السابق بدون المنطق الشرطي وباستخدام قالب مُضمن، لكن ذلك أدى إلى:

[THEME 6 'geowebforum-sponsors'] Error: [THEME 6 'geowebforum-sponsors'] Compile error: SyntaxError: /theme-6/discourse/api-initializers/geowebforum-sponsors.gjs: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-relative-url:

في وحدة تحكم المتصفح.

لقد جربت أيضًا مجموعات مختلفة من:

  • إخراج القالب إلى ثابت
  • أقواس متعرجة مفردة (بدلاً من مزدوجة)
  • استخدام استدعاء دالة (themeRelativeUrl("asseco_berit.jpg")) داخل الأقواس المتعرجة
  • نقل القالب إلى javascripts/discourse/components/geowebforum-sponsors.gjs (واستيراده من المُهيّئ)
  • نقل القالب إلى javascripts/components/geowebforum-sponsors.gjs (واستيراده من المُهيّئ)
  • إدخال class GEOWebforumSponsorsComponent extends Component {} في هذا الملف واستيراده في المُهيّئ (مع تصدير القالب من نفس الملف كـ template بجوار الفئة، كما اقترح عليّ نموذج لغوي كبير - ما زلت غير متأكد مما إذا كان ذلك منطقيًا).

إما أنني حصلت على:

  • نفس الخطأ (على الرغم من أنه من هذا الملف الآخر)
    أو
  • klass is not an Ember component
    أو
  • عناصر نائبة حرفية للقالب في عنصر DOM الناتج، مما أدى بالطبع إلى أخطاء 404 لمصادر الصور
إعجابَين (2)
Templating of my "component" broke. How do I fix it?
2

حسنًا، هل رأيت هذا الجزء؟

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

هل يعتبر ذلك “تحميلاً” إذا وضعتها في دليل assets الخاص بمشروع كود المصدر لمكوّن السمة؟

4

نعم. يمكنك وضعها مباشرة في دليل assets/.

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

بمساعدة التلميحات هنا وبعض المساعدة من روبوت ask.discourse.com تمكنت من جعل الأمر يعمل:

  • إليك الالتزام ذي الصلة فوق ما أنشأه discourse_theme CLI.
  • إليك الفرق عن محاولتي السابقة غير الناجحة المذكورة في المنشور العلوي.

شكرًا لك يا @NateDhaliwal!

الأشياء الرئيسية التي واجهتني صعوبة فيها في الطريق إلى هنا:

  • في القوالب، لا تعمل تعابير جافاسكريبت العشوائية (مثل استدعاءات الدوال) ولا تعابير الفلاتر (بالصيغة some-transormation-function someVariableOrLiteral) داخل الأقواس المعقوفة المزدوجة. يمكن فقط إدراج المتغيرات الفردية هناك.
  • بالنسبة لأحد الأصلين، نسيت تضمين اسم الدليل assets/ في قيمة مسار الملف المقابلة في about.json. فشل هذا بصمت، مما أدى إلى أن يكون الإعداد المقابل undefined، والذي أفترض أنه تسبب في حذف القالب بأكمله بصمت أو شيء من هذا القبيل.
  • في مرحلة ما أثناء التطوير، لم يكن لمكون السمة الذي تتم مزامنته بواسطة discourse_theme watch ... أي تأثير، سواء في المعاينة أو عند التنشيط صراحةً. إن السماح لـ discourse_theme watch ... بإنشاء نسخة جديدة من المكون على المثيل (وحذف النسخة السابقة) أدى إلى تصحيح ذلك. لست متأكدًا مما حدث بالضبط هناك.
6

هل تحققت من وحدة تحكم المتصفح؟ يتم الإبلاغ عن الأخطاء في المكون الخاص بك هناك، وإذا كانت هناك أخطاء، فلن يظهر المكون الخاص بك (أو يظهر بشكل غير مكتمل).