Mostrando contenido diferente para la vista móvil en un archivo .gjs

Desarrollador
,
1

Intentando actualizar nuestro componente de tema personalizado al nuevo estándar después del aviso de depreciación y no puedo averiguar cómo mostrar diferentes cosas para los usuarios móviles en esta configuración.

La guía de temas no menciona nada al respecto, la única publicación relevante que encontré es api.renderInOutlet not rendering? - #3 by NateDhaliwal que usa this.site.mobileView, así que asumí que algo como lo siguiente debería 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}}
      ¡Móvil!
      {{else}}
      ¡Normal!
      {{/if}}
    </template>`
  );
});

Pero solo veo el contenido normal… Obviamente me estoy perdiendo algo básico…

¡Gracias por cualquier pista!

2

Oh, probablemente solo necesite importar el servicio 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}}
      ¡Móvil!
      {{else}}
      ¡Normal!
      {{/if}}
    </template>
  );
});
3 Me gusta
3

¿Funcionaría también @service site;?

4

No. El decorador @service solo está disponible en clases de Ember como Components o Services. Si \u003ctemplate\u003e...\u003c/template\u003e se refactorizó como un componente separado, entonces puedes usar el decorador. Como apiInitializer() es solo una función, se debe acceder al servicio como en JS normal.

Puedes ver Ember object ownership (getOwner, service injections, etc.)

1 me gusta
5

Si lo deseas, puedes colocar una clase entera dentro de la llamada 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}}
          ¡Móvil!
        {{else}}
          ¡Normal!
        {{/if}}
      </template>
    }
  );
});

Pero la solución .lookup() también es razonable: de todos modos, eso es lo que @service hace en segundo plano :ok_hand:

6 Me gusta
6

¡Gracias, esto funciona!

También es gracioso cómo (al menos este sabor de) JS moderno se parece cada vez más al Java empresarial en el que solía trabajar (principios de la década de 2010) :smiley: