Afficher un contenu différent pour la vue mobile dans un fichier .gjs

Dev
,
1

J’essaie de mettre à jour notre composant de thème personnalisé selon la nouvelle norme après l’avis de dépréciation et je n’arrive pas à comprendre comment afficher des choses différentes pour les utilisateurs mobiles dans ce paramètre.

Le guide des thèmes ne mentionne rien à ce sujet, le seul post pertinent que j’ai trouvé est api.renderInOutlet not rendering? - #3 by NateDhaliwal qui utilise this.site.mobileView, j’ai donc supposé que quelque chose comme ce qui suit devrait fonctionner :

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

Mais je ne vois que le contenu normal… Je rate évidemment quelque chose de basique…

Merci pour tout indice !

2

Oh, il doit probablement juste importer le service site manuellement.

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}}
      Normal !
      {{/if}}
    </template>
  );
});
3 « J'aime »
3

Est-ce que @service site; fonctionnerait aussi ?

4

Non. Le décorateur @service n’est disponible que dans les classes Ember comme les Composants ou les Services. Si le <template>...</template> a été refactorisé en un composant séparé, alors vous pouvez utiliser le décorateur. Comme apiInitializer() n’est qu’une fonction, le service doit être accédé comme du JS normal.

Vous pouvez voir Ember object ownership (getOwner, service injections, etc.)

1 « J'aime »
5

Si vous le souhaitez, vous pouvez placer une classe entière dans l’appel 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}}
          Normal !
        {{/if}}
      </template>
    }
  );
});

Mais la solution .lookup() est également raisonnable - c’est d’ailleurs ce que fait @service en coulisses :ok_hand:

6 « J'aime »
6

Merci, ça marche !

C’est aussi drôle de voir comment (au moins cette saveur de) JS moderne ressemble de plus en plus au Java d’entreprise dans lequel je travaillais (début des années 2010) :smiley: