Widgets in der Kopfzeile bei Routenänderung ohne Fehler neu bewerten

Entwickler
1

Ich versuche, diese Widget-Vorlage zu überschreiben:

      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>
        `,
      });

Obwohl die Vorlage derzeit identisch mit dem Original unter discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at 4aa81e709ea49e30383a3a3acd33dfedaebfc240 · discourse/discourse · GitHub ist

generiert sie einen Fehler:

image
image1058×496 63.7 KB

Dies ist unerwartet, besonders da ich “noch” nichts “ändere”?

Ich kann dieses Problem reproduzieren, selbst wenn dies die einzige Änderung ist.

Letztendlich möchte ich dies ändern, um die Neubewertung dieser Vorlage zu erzwingen, auch wenn ich nicht in eine Topic-Route wechsle oder aus ihr herausgehe.

Letztendlich möchte ich Logik hinzufügen, damit das Widget beim Wechseln in und aus Kategorie-Routen neu geladen wird, da meine Darstellung der Kategorie-Route anders sein muss.

Eine Lösung hierfür könnte also ein anderer Weg sein, um das Aktualisieren des Header-Inhalts zu erzwingen.

Auf jeden Fall scheint sich dies nicht so zu verhalten, wie ich es erwarten sollte?

2

Wir wollen hier nicht viel Zeit investieren – Widgets werden nicht mehr lange existieren. Welche Anpassung möchten Sie vornehmen? Können wir helfen, indem wir irgendwo einen Plugin-Ausgang hinzufügen (wir haben jetzt die Möglichkeit, normale Plugin-Ausgänge im Widget-Code hinzuzufügen).

Können Sie mehr von Ihrer Datei teilen (z. B. woher hbs importiert wird?)

1 „Gefällt mir“
3

Welche Discourse-Version ist das? site-header.js:337 verweist derzeit nicht auf eine Variable namens ‘header’

1 „Gefällt mir“
4

Verstanden.

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

Funktional versuche ich, das Logo je nach Route zu wechseln. In der Realität mache ich das, indem ich ein Bild an das Home-Logo anhe>

Oooooops, das könnte das Problem sein, ich hatte das Gefühl, dass es so sein könnte, aber meine Tests waren offensichtlich zu oberflächlich, um das auszuschließen.

Ich sehe diesen Commit, ich muss meine Dev-Instanz aktualisieren … PERF: Memoize element references for `dockCheck` (#21079) · discourse/discourse@db16700 · GitHub

Ich werde auf jeden Fall zurücksetzen, danke für Ihre Zeit!

5

Das ist wahrscheinlich das Problem. Widget-Vorlagen sind eine benutzerdefinierte Discourse-Sache und werden auf eine völlig andere Weise kompiliert als Ember-Vorlagen. Sie müssen hbs wie folgt importieren:

Es sieht so aus, als hätten wir ein site-header:force-refresh AppEvent, das Sie als Reaktion auf ein anderes AppEvent oder ein Ember-Router-Ereignis auslösen könnten:

(Beispiel-Trigger hier)

3 „Gefällt mir“
6

Großartig, danke David, ich werde die veraltete Installation beheben und deine Empfehlungen hier auch ausprobieren. Mehrere Stapel, danke fürs Aufräumen!

3 „Gefällt mir“
7

Wahrscheinlich ein bisschen übertrieben, aber ich habe deinen Vorschlag verwendet, mit:

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

Das hat großartig funktioniert, obwohl es nicht ganz perfekt mit dem Routenübergang synchronisiert ist, aber das ist in Ordnung.

Nochmal danke!

3 „Gefällt mir“
8

Übrigens, nur am Rande, obwohl die Widget-API sehr speziell und etwas fummelig ist (besonders die Hyperscript-Sachen), muss ich zugeben, dass sie extrem mächtig ist, um bestehenden Widgets neues Verhalten hinzuzufügen, ohne viel Code überschreiben zu müssen.

Zum Beispiel habe ich dieses Muster oft verwendet:

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 könnte eine Menge Code sein!!!

Und es kann noch viel besser werden, sodass ich es wirklich zu schätzen gelernt habe.

Ich hoffe, die „Überschreibbarkeit“ dessen, was es ersetzen wird, wird ebenso flexibel und leistungsfähig sein.

1 „Gefällt mir“
9

Die Hauptlösung hier werden Plugin-Outlets sein. Wie immer, wenn Sie der Meinung sind, dass Sie eines benötigen, das nicht existiert, können Sie gerne einen PR für den Core erstellen :rocket:

1 „Gefällt mir“
10

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