无法将模板放入理想的出口

开发
1

我正尝试将一个模板放入 javascripts/discourse/initializers/persistent-banner.gjs 的特定插件插槽中。
代码：

import Component from "@glimmer/component";
import { apiInitializer } from "discourse/lib/api";

banner_plugin_outlet = settings.banner_position

export default apiInitializer("1.14.0", (api) => {
  try {
    banner_plugin_outlet = settings.banner_position
    api.renderInOutlet(
      banner_plugin_outlet,
      class persistentbanner extends Component {
        get bannerIsFilled() {
          if (settings.banner_text_content == "") {
            return false;
          } else if (settings.banner_visible == "hide") {
            return false;
          } else {
            return true;
          }
        }
        <template>
          {{#if this.bannerIsFilled}}
            <div class='persistent-banner'>
              <p>
                {{html_safe (theme-setting 'banner_text_content')}}
              </p>
            </div>
          {{/if}}
        </template>
      }
    );
  } catch (e) {
    console.log(e);
  }
}

但是 <template> 标签中的 HTML 不会在插槽位置显示。实际上，它根本不会显示。我哪里做错了？
仓库链接：GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.

1 个赞
2

请不要为此使用初始化程序？请使用 connectors 文件夹。那里有很多示例。

2 个赞
3

原因是可以选择不同的输出。
我从 Notification Banner 的仓库改编了这段代码。

2 个赞
4

明白了。是的，这很有道理。抱歉，我不确定您的功能意图。我应该更详细地阅读代码。

1 个赞
6

一些可以帮助您重新开始的事情：

  • 此文件在 apiInitializer 调用末尾缺少一个闭合圆括号 - 这将无法正常工作。

在修复该问题后，我看到了更多错误。

  • banner_plugin_outlet 未声明 - 您在此处需要一个 const。

    您是否分配了两次？我怀疑您不需要两次 :slight_smile:

    banner_plugin_outlet = settings.banner_position

export default apiInitializer("1.14.0", (api) => {
  try {
    banner_plugin_outlet = settings.banner_position

  • 您缺少导入：

    import { htmlSafe } from "@ember/template";
import themeSetting from "discourse/helpers/theme-setting";

  • …但我无法在此处将 themeSetting 作为助手使用。没有错误，只是空白，所以请尝试使用以下代码代替：

            get bannerTextContent() {
          return settings.banner_text_content;
        }
        <template>
          {{#if this.bannerIsFilled}}
            <div class='persistent-banner'>
              <p>
                {{htmlSafe this.bannerTextContent}}

  • 始终检查控制台以查找错误。

6 个赞
7

我导入了 htmlSafe，它效果非常好！\n非常感谢！

2 个赞
8

是的，辅助函数在 gjs 中不起作用（也并非必需）。定义一个 getter 是可以的。但如果你想避免这样做，可以直接从模板中引用 settings “全局”变量：

<template>
  {{htmlSafe settings.banner_text_content}}
</template>
4 个赞
9

谢谢。这似乎不太透明！:sweat_smile:

3 个赞
10

是的，这很公平。让我们改进错误消息：

SCR-20241014-kvau
SCR-20241014-kvau1444×214 33.3 KB

SCR-20241014-kvmu
SCR-20241014-kvmu1480×234 32.6 KB

5 个赞
11

谢谢。这极大地改善了开发人员体验。

正如我们所知，随着 .gjs 替代小部件，开发人员体验得到了显著改善。

然而

使用 gjs 组件时，您可能会遇到许多非常奇怪的错误，这使得查找问题变得非常困难。

例如，让我们弄错帮助程序名称：
{{html_safe this.bannerTextContent}}

会导致经典的：

program.js:100 未捕获（在承诺中）TypeError：无效值用作弱映射键 在 WeakMap.set（匿名）

（如果您忘记导入，即使名称有效，这里也会发生这种情况）

说什么？！ :sweat_smile: 有很多这样的例子。

我猜这是使用框架的一个缺点？

3 个赞
12

哎呀，这可真糟糕！

我在本地尝试时看到了：

SCR-20241014-muuf
SCR-20241014-muuf1992×146 30.6 KB

您是在生产环境的网站上看到 WeakMap 错误的吗？如果是这样……也许这是 ember 为了提高性能而在生产构建中优化掉的检查之一。

如果可以的话，我始终建议在合适的开发环境中开发主题/插件——有很多类似的情况，这样体验会更好。

4 个赞
13

是的，生产站点使用 Theme CLI ( ，我猜这是它的缺点之一，尽管它否则是一个很棒的工作流程？)

这完全说得通。

是的，对于插件来说，这是我的首选，但对于 TC，由于反馈的即时性（尽管不一定总是有帮助！），很容易针对生产站点进行开发。

但我刚刚意识到，您可以使用 CLI 进入 localhost 并且它有效。

所以，真是傻！

image

我以后会这样做的！ :rocket:

我不知道为什么我以为那是不可能的 :blush: :sweat_smile:

像往常一样，感谢您的帮助，这为我节省了很多时间（将来 :slight_smile: ）

2 个赞
14

是的！我尝试使用 theme-cli 在本地主机上工作，并且我也向其他人推荐这样做。我们肯定可以在记录这些推荐的工作流程方面做得更好 :eyes:

另一个技巧是 discourse.theme-creator.io 使用开发模式的 Ember 资源。因此，它也应该有更好的错误消息。

4 个赞
15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.