لا يمكن وضع القالب في المنفذ المطلوب

[NateDhaliwal]

أحاول وضع قالب في منفذ إضافي معين في ملف javascripts/discourse/initializers/persistent-banner.gjs الخاص بي.
الكود:

import Component from "@glimmer/component";
import { apiInitializer } from "discourse/lib/api";

banner_plugin_outlet = settings.banner_position

export default apiInitializer("1.14.0", (api) => {
  try {
    banner_plugin_outlet = settings.banner_position
    api.renderInOutlet(
      banner_plugin_outlet,
      class persistentbanner extends Component {
        get bannerIsFilled() {
          if (settings.banner_text_content == "") {
            return false;
          } else if (settings.banner_visible == "hide") {
            return false;
          } else {
            return true;
          }
        }
        <template>
          {{#if this.bannerIsFilled}}
            <div class='persistent-banner'>
              <p>
                {{html_safe (theme-setting 'banner_text_content')}}
              </p>
            </div>
          {{/if}}
        </template>
      }
    );
  } catch (e) {
    console.log(e);
  }
}

لكن HTML الموجود في الوسم <template> لن يتم عرضه في موقع المنفذ الإضافي. في الواقع، لن يتم عرضه على الإطلاق. ما الخطأ الذي أرتكبه؟
رابط المستودع: GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.

[merefield (Robert)]

لا تستخدم مُهيئًا لهذا؟ استخدم مجلد الموصلات. هناك العديد من الأمثلة.

[NateDhaliwal]

السبب هو وجود منافذ مختلفة يمكن تحديدها.
لقد قمت بتكييف هذا الرمز من مستودع Notification Banner.

[merefield (Robert)]

حسناً، فهمت. نعم، هذا منطقي. آسف، لم أكن متأكداً من نيتك الوظيفية. كان يجب أن أقرأ الكود بتفصيل أكبر.

[merefield (Robert)]

بعض الأشياء لتعود إلى العمل مرة أخرى:

• يحتوي هذا الملف على قوس دائري مفقود في نهاية استدعاء apiInitializer الخاص بك - لن يعمل هذا ببساطة.

عند إصلاح هذه المشكلة، أرى المزيد من الأخطاء.

• لم يتم التصريح عن banner_plugin_outlet - تحتاج إلى const هنا.

  هل تقوم بتعيينه مرتين؟ لا تحتاج إليه مرتين على ما أظن

  banner_plugin_outlet = settings.banner_position
  
  export default apiInitializer("1.14.0", (api) => {
    try {
      banner_plugin_outlet = settings.banner_position
  

• تفتقد إلى الاستيرادات:

  import { htmlSafe } from "@ember/template";
  import themeSetting from "discourse/helpers/theme-setting";
  

• … لكن لم أتمكن من جعل themeSetting يعمل كمساعد هنا. لا يوجد خطأ، فقط فارغ، لذا جرب هذا الكود بدلاً من ذلك:

          get bannerTextContent() {
            return settings.banner_text_content;
          }
          <template>
            {{#if this.bannerIsFilled}}
              <div class='persistent-banner'>
                <p>
                  {{htmlSafe this.bannerTextContent}}
  

• تحقق دائمًا من وحدة التحكم بحثًا عن الأخطاء.

[NateDhaliwal]

لقد قمت باستيراد htmlSafe وعمل هذا بشكل رائع!
شكرا جزيلا!

[david (David Taylor)]

@merefield

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

        get bannerTextContent() {
          return settings.banner_text_content;
        }
        <template>
          {{#if this.bannerIsFilled}}
            <div class='persistent-banner'>
              <p>
                {{htmlSafe this.bannerTextContent}}

نعم، المساعد لا يعمل (وليس ضروريًا) في gjs. تعريف getter جيد. ولكن إذا كنت ترغب في تجنب ذلك، يمكنك الإشارة مباشرة إلى “الإعدادات” “العالمية” من القالب:

<template>
  {{htmlSafe settings.banner_text_content}}
</template>

[merefield (Robert)]

شكرا. لم يبدو ذلك شفافًا جدًا!

[david (David Taylor)]

نعم هذا عادل. لنحسن رسائل الخطأ:

DEV: Improve error messages for legacy theme helpers in gjs

[merefield (Robert)]

شكرا لك. هذا يساعد حقًا في تجربة المطور.

والتي كما نعلم تحسنت بشكل كبير مع .gjs بدلاً من الأدوات.

ولكن

هناك الكثير من الأخطاء الغريبة التي يمكنك الحصول عليها عند استخدام مكونات gjs والتي لا تجعل العثور على المشكلات سهلاً للغاية.

على سبيل المثال، دعنا نُفسد اسم المساعد:
{{html_safe this.bannerTextContent}}

يؤدي إلى الكلاسيكي:

program.js:100 Uncaught (in promise) TypeError: Invalid value used as weak map key
at WeakMap.set (anonymous)

(يحدث هذا أيضًا هنا مع اسم صالح إذا نسيت الاستيراد)

قل ماذا؟! هناك الكثير من هذه الأمثلة.

أعتقد أن هذا هو الجانب السلبي لاستخدام إطار عمل؟

[david (David Taylor)]

أوه، هذا سيء!\n\nعندما أجرب محليًا، أرى:\n\n

\n\nأين رأيت خطأ WeakMap؟ في موقع إنتاجي؟ إذا كان الأمر كذلك… ربما يكون هذا أحد الفحوصات التي تقوم Ember بتحسينها خارج الإنشاءات الإنتاجية لتحسين الأداء.\n\nإذا استطعت، سأوصي دائمًا بتطوير السمات/الإضافات في بيئة تطوير مناسبة - هناك العديد من الحالات مثل هذه حيث ستكون التجربة أفضل.

[merefield (Robert)]

نعم، موقع الإنتاج يستخدم Theme CLI ( والذي أعتقد أنه أحد عيوبه، على الرغم من أنه بخلاف ذلك سير عمل رائع؟)

@david

لا يتم إجراء أي من عمليات التحقق التي يقوم Ember بتحسينها خارج عمليات الإنتاج لتحسين الأداء.

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

@david

أوصي دائمًا بتطوير السمات … مقابل بيئة تطوير مناسبة

نعم، مع الإضافات، هذا هو خياري المفضل، ولكن مع TCs هناك إغراء كبير للتطوير مقابل موقع إنتاج بسبب فورية التغذية الراجعة (إن لم تكن دائمًا مفيدة جدًا!)

لكنني أدركت للتو، يمكنك إدخال localhost باستخدام CLI وهو يعمل.

لذا، يا للسخافة!

سأستخدم ذلك في المستقبل!

ليس لدي أي فكرة لماذا اعتقدت أن ذلك لن يكون ممكنًا

كالعادة، شكرًا لمساعدتك التي وفرت علي الكثير من الوقت (في المستقبل )

[david (David Taylor)]

نعم! أعمل باستخدام Localhost مع theme-cli، وهذا ما أوصي به الآخرين. يمكننا بالتأكيد تحسين توثيق سير العمل الموصى به هذا

النصيحة الأخرى هي أن discourse.theme-creator.io يعمل بأصول Ember في وضع التطوير. لذلك يجب أن يحتوي أيضًا على رسائل خطأ أفضل.