Exibindo conteúdo diferente para visualização móvel em um arquivo .gjs

Dev
,
1

Tentando atualizar nosso componente de tema personalizado para o novo padrão após o aviso de descontinuação e não consigo descobrir como mostrar coisas diferentes para usuários móveis nesta configuração.

O guia de temas não menciona nada sobre isso, o único post relevante que encontrei é api.renderInOutlet not rendering? - #3 by NateDhaliwal que usa this.site.mobileView, então presumi que algo como o seguinte deveria funcionar:

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

Mas eu só vejo o conteúdo normal… Obviamente estou perdendo algo básico…

Obrigado por qualquer dica!

2

Ah, provavelmente só precisa importar o serviço site manualmente.

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 curtidas
3

O @service site; também funcionaria?

4

Não. O decorador @service só está disponível em classes Ember, como Componentes ou Serviços. Se o <template>...</template> foi refatorado como um componente separado, então você pode usar o decorador. Como apiInitializer() é apenas uma função, o serviço deve ser acessado como JavaScript normal.

Você pode ver Ember object ownership (getOwner, service injections, etc.)

1 curtida
5

Se desejar, você pode colocar uma classe inteira dentro da chamada 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>
    }
  );
});

Mas a solução .lookup() também é razoável - é o que @service faz nos bastidores de qualquer forma :ok_hand:

6 curtidas
6

Obrigado, isso funciona!

Também é engraçado como (pelo menos este sabor de) JS moderno se parece cada vez mais com Java corporativo quando eu trabalhava nesse mundo (início de 2010):smiley: