在 .gjs 文件中为移动视图显示不同内容

开发
,
1

正在尝试在我们弃用通知后将自定义主题组件更新到新标准，但我无法弄清楚如何在设置中为移动用户显示不同的内容。

主题指南没有提到任何关于此的内容，我找到的唯一相关帖子是 https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/3，其中使用了 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}}
      Mobile!
      {{else}}
      Normal!
      {{/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",
    <>
      {{#if site.mobileView}}
      Mobile!
      {{else}}
      Normal!
      {{/if}}
    </>
  );
});
3 个赞
3

@service site; 也可用吗？

4

不。@service 装饰器仅在 Ember 类（如 Components 或 Services）中可用。如果 \u003ctemplate\u003e...\u003c/template\u003e 被重构为一个单独的组件，那么您就可以使用该装饰器。由于 apiInitializer() 只是一个函数，因此必须像普通 JS 一样访问服务。

您可以看到 Ember object ownership (getOwner, service injections, etc.)

1 个赞
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}}
          Mobile!
        {{else}}
          Normal!
        {{/if}}
      </template>
    }
  );
});

但 .lookup() 解决方案也是合理的——这正是 @service 在后台所做的 :ok_hand:

6 个赞
6

太好了，这管用！\n\n而且很有趣的是，（至少这个版本的）现代 JS 越来越像我以前工作过的企业 Java（2010 年初）：:smiley: