Glimmer 단일 파일 컴포넌트에서 routeAction을 사용할 수 있나요?

개발
1

.hbs 템플릿 파일에서 다음과 같이 route-action 헬퍼를 사용할 수 있습니다:

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

그렇다면 동일한 선언을 glimmer 템플릿 파일에서도 사용할 수 있을까요? 아래처럼 시도해 보았지만 동작하지 않습니다:

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

[...]

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

Glimmer 컴포넌트에서는 헬퍼가 필요하지 않다고 생각합니다. 직접 이렇게 할 수 있습니다:

{{on "click" this.showLogin}}

인자를 전달해야 하는 경우:

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

다음과 같은 액션을 찾게 됩니다:

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

@Arkshine 님 감사합니다! 전반적으로 glimmer 컴포넌트에서 액션을 어떻게 전달하는지 이해한 것 같습니다. 하지만 route-action 헬퍼는 로컬 스코프에 선언되지 않은 액션을 호출하기 위해 라우트 계층 구조를 따라 이동합니다. 그래서 컴포넌트에 직접 선언만 하면 됩니다. 예를 들어:

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

이 경우 템플릿만 작업하면 되고, 호출되는 로직은 자동으로 전달되므로(제 관점에서 보면요 :slight_smile: ) 신경 쓸 필요가 없습니다. 이 방식은 좋았지만, 이것이 최선의 관행이었는지, 그리고 현재 glimmer 컴포넌트에서 어떻게 접근할 수 있는지 이해가 되지 않습니다.

4

맞아요, 제 실수였어요. :pensive: 별로 생각하지 않고 자동적으로 답변을 했어요. (아, 그때는 새벽 5시였거든요 :smile:).
지금 당장 질문에 대한 답은 없지만, 제가 알아볼 수 있는 게 있으면 다시 말씀드릴게요!

5

테스트 결과, 아래 코드가 작동합니다.

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

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

이는 컴포넌트에 router 서비스가 정의되어 있다고 가정합니다.

이것이 나쁜 관행으로 간주되는지 확실하지 않습니다. 좋은 아이디어처럼 들리지는 않지만, 작동은 합니다. :smile:

6

다시 한번 감사드립니다! 약간 해킹적인 느낌이라는 데 동의합니다 :smile: 다만 제 환경에서는 동작하지도 않네요.. discourse-featured-lists/javascripts/discourse/components/featured-list.gjs at main · nolosb/discourse-featured-lists · GitHub 파일에서 액션을 대체하려고 시도해 보고 있습니다.

일단 여기까지만 하고, 컴포넌트는 현재 상태가 잘 작동하므로 그대로 두는 것이 나을 것 같습니다. 내부적으로 몇 가지가 어떻게 동작하는지 더 잘 이해해 보고 싶을 뿐입니다 :mechanic:t4:

7

기본 내보내기(default export)를 사용하면 의도대로 작동할 것 같습니다(즉, 라우터 서비스를 주입하거나 수동으로 참조를 전달할 필요가 없이).

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

(왜 routeAction이라는 이름으로 내부 함수도 내보내는 건지 모르겠습니다… 꽤 혼란스럽네요! 그걸 고치자)

다만 일반적으로 {{action "blah"}}이나 {{routeAction "blah"}} 같은 문자열 기반 방식보다는 {{on "click" this.someFunction}}와 같은 '클로저 액션(closure actions)'으로 이동하려고 하고 있습니다.