Mostrare contenuti diversi per la visualizzazione mobile in un file .gjs

Sviluppatore
,
1

Sto cercando di aggiornare il nostro componente del tema personalizzato al nuovo standard dopo l’avviso di deprecazione e non riesco a capire come mostrare cose diverse per gli utenti mobili in questa impostazione.

La guida del tema non menziona nulla a riguardo, l’unico post pertinente che ho trovato è api.renderInOutlet not rendering? - #3 by NateDhaliwal che utilizza this.site.mobileView, quindi ho ipotizzato che qualcosa di simile a quanto segue dovrebbe funzionare:

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

export default apiInitializer("1.8.0", (api) => {
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    `<template>
      {{#if this.site.mobileView}}
      Mobile!
      {{else}}
      Normale!
      {{/if}}
    </template>`
  );
});

Ma vedo sempre solo il contenuto normale… Ovviamente mi manca qualcosa di basilare…

Grazie per qualsiasi suggerimento!

2

Oh, probabilmente ha solo bisogno di importare manualmente il servizio site.

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",
    <template>
      {{#if site.mobileView}}
      Mobile!
      {{else}}
      Normale!
      {{/if}}
    </template>
  );
});
3 Mi Piace
3

Funzionerebbe anche @service site;?

4

No. Il decoratore @service è disponibile solo nelle classi Ember come Componenti o Servizi. Se il <template>...</template> fosse stato refattorizzato come componente separato, allora potresti usare il decoratore. Poiché apiInitializer() è solo una funzione, il servizio deve essere accessibile come normale JS.

Puoi vedere Ember object ownership (getOwner, service injections, etc.)

1 Mi Piace
5

Se preferisci, puoi inserire un’intera classe all’interno della chiamata renderInOutlet:

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}}
          Normale!
        {{/if}}
      </template>
    }
  );
});

Ma anche la soluzione .lookup() è ragionevole: dopotutto, è quello che @service fa dietro le quinte :ok_hand:

6 Mi Piace
6

Grazie, funziona!

È anche divertente come (almeno questo tipo di) JS moderno assomigli sempre di più a Java enterprise quando ci lavoravo (inizio 2010):smiley: