템플릿에서 문자열이 같은지 확인하는 if 조건은 어떻게 작성하나요?

개발
1

플러그인에서 템플릿에 if 문구를 사용하여 문자열이 특정 값과 일치하는지 평가하고 싶습니다.

아래와 같은 형태입니다:

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>There is a match!</div>
  {{/if}}
{{/each}}

Discourse에서 어떻게 해야 할까요?

Ember/Handlebars에서는 단순한 {{if}}가 작동하지 않는다는 것을 이해하고 있습니다. 헬퍼를 등록해야 하는 것 같습니다. 다음과 같은 방식으로요:

plugin/assets/javascripts/discourse/helpers/eq/js/es6

import { registerHelper } from 'discourse-common/lib/helpers';

registerHelper('eq', function(arg1, arg2) {
     if (arg1 === arg2) {
         return true
    } else {
       return false
    }
})

plugin/assets/javascripts/templates/components/my-component.hbs

{#each groups as |group|}}
  {{#eq group.name "AwesomeName"}}
      <div>There is a match!</div>
 {{/eq}}
{{/each}}

이것은 작동하지 않습니다. (에러 메시지가 표시되지 않습니다.)

여기의 해결책도 시도해 보았는데, "makeBoundHelper"를 사용하려고 하지만 이 또한 저에게는 작동하지 않습니다. 해당 방법에서는 "makeBoundHelper"가 함수가 아니라는 에러가 발생합니다.

저는 단순히 문자열이 특정 값과 일치하는지 확인하는 if 문구를 사용할 수 있기를 바랍니다. 어떻게 해야 하나요?

2

Computed Properties - The Object Model - Ember Guides 을 사용하려는 것이죠.

다만, Discourse의 소스 코드를 참고하여 그들의 특정 코드 스타일을 확인해 보세요.

3

컴puted 프로퍼티는 흥미롭지만, 제가 지금 집중하고 있는 부분과의 연결고리가 잘 보이지 않습니다.

제 예시에서 핵심 프로퍼티는 group.name이며, 템플릿에서 해당 프로퍼티가 "AwesomeName"과 일치하는지 평가하고 싶습니다. 템플릿에서 특정 유형의 {{if}} 문장을 사용해야 한다는 필요성을 어떻게 우회할 수 있는지, 컴puted 프로퍼티가 이를 어떻게 해결해 줄 수 있는지 아직 파악하지 못했습니다.

4

Handlebars 템플릿에는 기본적인 부울 논리만 제공됩니다. 이를 통해 속성에 대해 truthy 값을 확인할 수 있습니다.

더 복잡한 작업을 수행하려면 템플릿과 연결된 Ember JS 파일에서 논리를 처리해야 합니다.

예를 들어 templates/components/my-component.hbs에 템플릿이 있다고 가정해 보겠습니다. 계산은 components/my-component.js라는 JS 파일을 사용해야 합니다.

해당 파일에서는 다음과 같은 코드를 작성할 수 있습니다:

import discourseComputed from "discourse-common/utils/decorators";
import Component from "@ember/component";

export default Component.extend({
  @discourseComputed("string1", "string2")
  property(string1, string2) {
    return string1 === string2;
  }
});

property는 단순히 함수의 이름일 뿐이며, 다른 어떤 이름도 사용할 수 있습니다.

그런 다음 템플릿에서는 다음과 같이 작성합니다:

{{#if property}}
 blah blah...
{{/if}}

이것은 JS 파일에서 계산된 속성을 가져와 property가 true를 반환할 때만 #if 블록의 내용을 표시합니다.

5

이해하는 데 도움이 되네요. 고맙습니다.

아직 제대로 작동하게 만들지 못했습니다. 부분적으로는 계산된 프로퍼티(computed properties)를 사용하여 이 유형의 작업을 수행하는 예시를 밖에서 찾지 못해서입니다.

제 경우, 플러그인에서 그룹 인덱스 템플릿을 변경하고 있습니다. 즉, 파일 plugin/assets/javascripts/discourse/groups/index.hbs에서 변경 사항을 수행하고 있습니다(그냥 그룹 인덱스 전체 코드를 거기에 넣고 그 위에 변경 사항을 추가했습니다).

계산된 프로퍼티 js가 제가 만들어야 하는 plugin/assets/javascripts/discourse/groups/index.js라는 파일에 들어가야 한다는 말씀이신가요? 아니면 이니셜라이저(initializer)에 그 코드를 넣어도 되나요?

말씀하신 내용을 구현하기 위해 제가 할 수 있는 최선의 시도는 다음과 같습니다. 이것이 말씀하신 내용인가요:

js:

export default Component.extend({
  @discourseComputed("group.name", "Amazing_Name")
  property(group.name, Amazing_Name) {
    return group.name === Amazing_Name
  }
})

hbs:

 {{#if property}}
    <div>Yep There is a Match!</div>
 {{/if}}

아니면 @discourseComputed에 "string1"과 "string2"와 같은 일반적인 값을 그대로 입력하고, 템플릿을 {{#if property group.name "Amazing_Name"}}으로 변경해야 한다는 말씀이신가요? (그렇게 해야만 템플릿에서 각 값이 동적일 수 있도록 처리할 수 있을 것 같습니다.)

아직 두 가지 접근 방식 모두 제대로 작동하지 않습니다.

도움 주셔서 감사합니다.

6

성공적으로 작동하게 만들 수 있었나요? 어떻게 해야 하는지에 대한 자세한 예시(어떤 내용을, 어떤 파일에, 관련이 있다면 파일의 어디에 추가해야 하는지)가 절실합니다.

7

사실 나 자신도 이걸 제대로 동작시킨 적이 없어서 결국 다른 방향으로 넘어갔습니다. 보통은 기본적인 코딩 연습으로 끝날 일을 이렇게 오래 매달리는 게 어리석게 느껴졌거든요. 제 경우에는 여기저기 문법 오류가 조금씩 있었던 것 같지만, 제대로 동작하는 완전한 예시를 찾지 못했습니다. if string === string.을 어떻게 구현하는지 완전한 동작 예시도 있다면 정말 감사하겠습니다.