Показ другого контента для мобильного вида в файле .gjs

Разработка
,
1

Пытаюсь обновить компонент нашей пользовательской темы до нового стандарта после уведомления об устаревании, но не могу понять, как отображать разный контент для мобильных пользователей в этой настройке.

В руководстве по теме ничего об этом не сказано. Единственный релевантный пост, который я нашел, — api.renderInOutlet not rendering? - #3 by NateDhaliwal, где используется this.site.mobileView. Поэтому я предположил, что что-то вроде следующего должно сработать:

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}}
      Мобильная версия!
      {{else}}
      Обычная версия!
      {{/if}}
    </template>
  );
});

Но я всегда вижу только обычный контент… Очевидно, я упускаю что-то элементарное…

Спасибо за любые подсказки!

2

О, скорее всего, нужно просто вручную импортировать сервис 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}}
      Мобильная версия!
      {{else}}
      Обычная версия!
      {{/if}}
    </template>
  );
});
3

Сработает ли @service site; тоже?

4

Нет. Декоратор @service доступен только в классах Ember, таких как компоненты или сервисы. Если <template>...</template> был рефакторирован как отдельный компонент, то вы можете использовать этот декоратор. Поскольку apiInitializer() — это просто функция, к сервису нужно обращаться как к обычному JavaScript.

Вы можете посмотреть: Ember object ownership (getOwner, service injections, etc.)

5

Если хотите, вы можете поместить весь класс внутрь вызова 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}}
          Мобильная версия!
        {{else}}
          Обычная версия!
        {{/if}}
      </template>
    }
  );
});

Однако решение с .lookup() также вполне разумно — именно так @service работает под капотом :ok_hand:

6

Спасибо, всё работает!

Также забавно, что (по крайней мере, этот вариант) современного JS всё больше напоминает корпоративный Java, когда я работал в этой сфере (начало 2010-х) :smiley: