Anzeigen unterschiedlicher Inhalte für die mobile Ansicht in einer .gjs-Datei

Entwickler
,
1

Versuche, unsere benutzerdefinierte Theme-Komponente nach der Deprecation-Meldung auf den neuen Standard zu aktualisieren, und ich kann nicht herausfinden, wie ich hier unterschiedliche Dinge für mobile Benutzer anzeigen kann.\n\nDer Theme-Leitfaden erwähnt nichts darüber, der einzige relevante Beitrag, den ich gefunden habe, ist api.renderInOutlet not rendering? - #3 by NateDhaliwal, der this.site.mobileView verwendet, also nahm ich an, dass etwas wie das Folgende funktionieren sollte:\n\n\nimport { apiInitializer } from \"discourse/lib/api\";\n\nexport default apiInitializer(\"1.8.0\", (api) =\u003e {\n api.renderInOutlet(\n \"composer-after-save-or-cancel\",\n \u003ctemplate\u003e\n {{#if this.site.mobileView}}\n Mobile!\n {{else}}\n Normal!\n {{/if}}\n \u003c/template\u003e\n );\n});\n\n\nAber ich sehe immer nur den normalen Inhalt… Mir fehlt offensichtlich etwas Grundlegendes…\n\nDanke für jeden Hinweis!

2

Oh, es muss wahrscheinlich nur der site-Dienst manuell importiert werden.

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {
  const site = api.container.lookup("service:site");
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    <>
      {{#if site.mobileView}}
      Mobile!
      {{else}}
      Normal!
      {{/if}}
    </>
  );
});
3 „Gefällt mir“
3

Würde @service site; auch funktionieren?

4

Nein. Der @service-Decorator ist nur in Ember-Klassen wie Komponenten oder Diensten verfügbar. Wenn die <template>...</template> als separate Komponente refaktorisiert wurde, können Sie den Dekorator verwenden. Da apiInitializer() nur eine Funktion ist, muss auf den Dienst wie bei normalem JS zugegriffen werden.

Sie können Ember object ownership (getOwner, service injections, etc.) einsehen.

1 „Gefällt mir“
5

Wenn Sie möchten, können Sie eine ganze Klasse in den renderInOutlet-Aufruf einfügen:

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

export default apiInitializer((api) => {
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    class extends Component {
      @service site;

      <template>
        {{#if this.site.mobileView}}
          Mobile!
        {{else}}
          Normal!
        {{/if}}
      </template>
    }
  );
});

Aber die .lookup()-Lösung ist auch vernünftig – das macht @service sowieso im Hintergrund :ok_hand:

6 „Gefällt mir“
6

Danke, das funktioniert!

Auch lustig, wie (zumindest diese Art von) modernem JS immer mehr wie Enterprise Java aussieht, als ich in dieser Welt gearbeitet habe (frühe 2010er Jahre) :smiley: