我可以在 Glimmer 单文件组件中使用 routeAction 吗？

开发
1

我可以在 .hbs 模板文件中像这样使用 route-action 助手：

@action={{route-action "showLogin"}}

我可以在 Glimmer 模板文件中使用相同的声明吗？我尝试过但不起作用：

import { routeAction } from 'discourse/helpers/route-action';

[...]

{{on "click" routeAction "showLogin"}}
2 个赞
2

在 glimmer 组件中，我认为您不需要辅助函数。您可以直接执行此操作：

{{on "click" this.showLogin}}

如果您需要传递参数：

{{on "click" (fn this.showLogin <argument>)}}

它会查找动作：

@action
showLogin(<argument>, event) {}
3 个赞
3

感谢 @Arkshine！我认为我大致了解了如何在 Glimmer 组件中传递 action。但是 route-action 辅助函数会沿着路由层级结构移动，以调用不在本地作用域中声明的 action。因此，您可以直接在组件中声明它，例如：

{{route-action "showLogin"}}
{{route-action "showCreateAccount"}}
{{route-action "composePrivateMessage"}}

我可以直接在模板中进行操作，而不太关心调用的逻辑，因为它会自动传递（从我的角度来看 :)）。我喜欢这一点，但我不知道这是否曾是最佳实践，以及我现在如何在 Glimmer 组件中访问它。

4

你说得对；是我的错。:pensive: 我没怎么想就自动回答了。（好吧，当时是早上 5 点 :smile:）。
我现在没有你问题的答案，但如果我这边有什么发现，我会再回复你！

1 个赞
5

根据我的测试，以下代码有效。

import { get } from "@ember/object";
import { routeAction } from 'discourse/helpers/route-action';

{{on "click" (routeAction "showLogin" (get this "router._router"))}}

它假设您在组件中定义了 router 服务。

我不确定这是否被认为是坏习惯。听起来不是个好主意，但它确实有效。:smile:

3 个赞
6

再次感谢！我同意它看起来有点粗糙 :smile: 不过对我来说也不起作用。我正在尝试替换 discourse-featured-lists/javascripts/discourse/components/featured-list.gjs at main · nolosb/discourse-featured-lists · GitHub 中的 action。

好吧，我现在可能就先放弃了，这个组件目前运行得很好。只是想更好地理解一些底层的工作原理 :mechanic:t4:

7

我认为，如果您使用默认导出，它应该能按预期工作（即，无需注入路由服务，或手动传递对其的引用）

import routeAction from "discourse/helpers/route-action";

（不确定为什么还有一个内部函数被导出为 routeAction……非常令人困惑！让我们修复它）

不过我想说……总的来说，我们正试图转向“闭包动作”，如 {{on \"click\" this.someFunction}}，而不是像 {{action \"blah\"}} 或 {{routeAction \"blah\"}} 这样的基于字符串的东西。

3 个赞