إعادة تقييم الأدوات المصغرة في الرأس عند تغيير المسار بدون خطأ

مطور
1

أحاول تجاوز هذا القالب المصغر:

      api.reopenWidget("header-contents", {
        template: hbs`

          {{#if this.site.desktopView}}
            {{#if attrs.sidebarEnabled}}
              {{sidebar-toggle attrs=attrs}}
            {{/if}}
          {{/if}}

          {{home-logo attrs=attrs}}

          {{#if attrs.topic}}
            {{header-topic-info attrs=attrs}}
          {{else if this.siteSettings.bootstrap_mode_enabled}}
            {{#if transformed.showBootstrapMode}}
              {{header-bootstrap-mode attrs=attrs}}
            {{/if}}
          {{/if}}

          <div class="panel clearfix" role="navigation">{{yield}}</div>
        `,
      });

على الرغم من أن القالب حاليًا مطابق للأصل في discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at 4aa81e709ea49e30383a3a3acd33dfedaebfc240 · discourse/discourse · GitHub

إنه يولد خطأ:

image
image1058×496 63.7 KB

هذا غير متوقع، خاصة وأنني لا “أغير أي شيء” (حتى الآن)؟

أنا قادر على تكرار هذه المشكلة حتى لو كان هذا هو التعديل الوحيد.

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

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

لذلك قد يكون أحد الحلول لهذه المشكلة هو طريقة أخرى لإجبار تحديث محتويات الرأس.

في أي حال، لا يبدو أن هذا يتصرف كما ينبغي أن أتوقع؟

2

لا نريد استثمار الكثير من الوقت هنا - لن تكون الأدوات (widgets) موجودة لفترة أطول. ما هو التخصيص الذي تحاول إجراؤه؟ هل يمكننا المساعدة بإضافة منفذ إضافات (plugin outlet) في مكان ما (لدينا القدرة على إضافة منافذ إضافات عادية داخل كود الأدوات الآن).

هل يمكنك مشاركة المزيد من ملفك (على سبيل المثال، من أين يتم استيراد hbs؟)

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

وما هو إصدار Discourse هذا؟ site-header.js:337 لا يشير حاليًا إلى متغير ‘header’

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

مفهوم.

import { hbs } from "ember-cli-htmlbars";

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

أداتي category-logo-widget مرتبطة على النحو التالي:

      api.decorateWidget("home-logo:after", (helper) => {
        const currentPath = helper.register
          .lookup("service:router")
          .get("_router.currentPath");

        if (
          helper.widget.currentUser &&
          !helper.widget.site.mobileView &&
          currentPath.indexOf("discovery") === -1
        ) {
          return helper.attach("category-logo-widget");
        }
      });

وهذا يعمل بشكل جيد، ولكنه لا يُعاد تقييمه بين انتقالات مسارات معينة، لذا فهو لا يفي بالمتطلب الديناميكي بالكامل بدون إعادة تحميل الصفحة.

أوه، قد تكون هذه هي المشكلة، لقد شعرت بذلك ولكني اختبرت بشكل سطحي للغاية لاستبعاد ذلك.

أرى هذا الالتزام، سأحتاج إلى تحديث مثيلي للتطوير … PERF: Memoize element references for `dockCheck` (#21079) · discourse/discourse@db16700 · GitHub

سأقوم بالتراجع على أي حال، شكراً لوقتك!

5

هذه على الأرجح هي المشكلة. قوالب ‘Widget’ هي شيء خاص بـ Discourse، ويتم تجميعها بطريقة مختلفة تمامًا عن قوالب Ember. ستحتاج إلى استيراد hbs على هذا النحو:

يبدو أن لدينا حدث تطبيق site-header:force-refresh يمكنك تشغيله استجابةً لحدث تطبيق آخر أو حدث مسار Ember:

(مثال على المشغل هنا)

3 إعجابات
6

رائع، شكرًا ديفيد، سأقوم بإصلاح التثبيت القديم وتجربة توصياتك هنا أيضًا. تراكمت عدة مشاكل، شكرًا للمساعدة في توضيح الأمور!

3 إعجابات
7

لذلك ربما يكون الأمر مفرطًا بعض الشيء، لكنني انتهى بي الأمر باستخدام اقتراحك، مع:

      api.onPageChange(url =>  {
        const applicationController = container.lookup(
          "controller:application"
        );
        applicationController.appEvents.trigger(
          "site-header:force-refresh"
        );
      });

لقد نجح الأمر بشكل رائع، على الرغم من أنه لا يتزامن تمامًا مع انتقال المسار، ولكن هذا لا بأس.

شكرا مرة أخرى!

3 إعجابات
8

بالمناسبة، كملاحظة جانبية هنا، بينما واجهة برمجة تطبيقات الأدوات (widget API) مخصصة للغاية وصعبة بعض الشيء (خاصةً مع أشياء hyperscript)، يجب أن أعترف بأنها قوية للغاية لربط سلوكيات جديدة بالأدوات الموجودة دون الحاجة إلى تجاوز الكثير من التعليمات البرمجية.

على سبيل المثال، لقد استخدمت هذا النمط كثيرًا:

api.reopenWidget('discourse-awesome-widget', {

  html(attrs, state) {
    let contents = this._super(...arguments);

    contents.unshift(h("div.my-cool-new-thing", "cool new thing"))

    return contents;
  }
});

this._super يمكن أن يكون الكثير من التعليمات البرمجية!!!

ويمكن أن يصبح أذكى من ذلك بكثير لدرجة أنني أصبحت أقدره حقًا.

آمل أن تكون “قابلية التجاوز” (override-abiliy) لما سيحل محلها مرنة وقوية بنفس القدر.

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

الحل الرئيسي هنا سيكون نقاط توصيل الإضافات (plugin outlets). كما هو الحال دائمًا، إذا شعرت أنك بحاجة إلى نقطة توصيل غير موجودة، فلا تتردد في تقديم طلب سحب (PR) إلى النواة :rocket:

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.