템플릿에서 위젯 액션으로 매개변수를 주입할 수 있나요?

개발
1

Developer’s guide to Discourse Themes 토론을 이어갑니다:

안녕하세요,

템플릿에서 액션으로 매개변수를 주입할 수 있는지 궁금해서 질문드립니다. @Johani 님의 가이드에서 긍정적이거나 부정적인 답변을 찾지 못했습니다. 제 목표는 템플릿으로 여러 위젯을 생성하고, 각 위젯의 액션이 {{#each}} 루프의 매개변수를 인식하는 것입니다.

예를 들어, 카테고리 알림 다중 선택 버튼을 선택한 후:

<script type="text/x-handlebars" data-template-name="components/some_component">
{{#each categories as |c|}}
    {{category-notifications-button
        value=c.notification_level
        category=c
        onChange=(action "changeCategoryNotificationLevel" ***somehow_inject_c_as_a_parameter***)
    }}
{{/each}}
</script>

<script type="text/discourse-plugin" version="0.8">
  api.modifyClass("controller:some_component", {
    actions: {
      changeCategoryNotificationLevel(selected_value, ***c_as_a_parameter***) {
        c_as_a_parameter.setNotification(notificationLevel);
      }
    }
  }
});
</script>

changeCategoryNotificationLevel 내부에서 템플릿 기준으로 현재 어떤 카테고리에 있는지 알 수 있는 방법이 있을까요?

만약 불가능하다면, 제 문제가 충분히 명확히 설명되었다면 동일한 결과를 얻을 수 있는 다른 방법이 있을까요?

미리 감사드립니다.

2

일반적인 문제에 대해서는 아무것도 찾지 못했지만, 내 문제는 다음과 같이 해결했습니다:

{{#each categories as |c|}}
    {{category-notifications-button
        ...
        onChange=(action (mut c.notification_level))
    }}
{{/each}}

즉, 버튼에서 반환된 값으로 c.notification_level 필드를 변경(mutate)하려는 것 같습니다.

3

실제로 제 문제는 위에서 제시된 방식으로 해킹될 수 없었습니다:

  • 네, 알림 수준은 변경되었지만…
  • 저장되지는 않았습니다. 다른 행동을 통해 저장하려면 다른 곳을 클릭해야 합니다.

GitHub 코드 데이터베이스에서 무작위 키워드를 열심히 검색한 끝에 다음과 같은 구조를 찾을 수 있었습니다:
{{d-button action=(action "up" wc) ...}}.

몇 가지 테스트를 해본 결과, 다음과 같이 작동한다는 결론에 도달했습니다:

  • 템플릿:
    {{d-button action=(action "nameoftheaction" arg1 arg2) ...}}`.
  • JS:
    api.modifyClass("component:some-component", {
    actions: {
        nameoftheaction(arg1, arg2, argA, argB) {
            console.log(arg1);
            console.log(arg2);
            console.log(argA);
            console.log(argB);
        }
    }
})

메서드의 첫 번째 인자 arg1, arg2는 템플릿에서 전달된 값입니다. 나머지 인자 argA, argB…는 컴포넌트의 특성상 전달될 수 있습니다(예를 들어, category-notifications-button은 사용자가 클릭한 설정에 따라 정수를 반환합니다).

제가 작성한 내용이 정확하다고 확신할 수는 없지만, 저와 같은 질문을 하는 누군가에게 도움이 될 수 있을 것입니다.