テンプレートで「string === string」を持つ方法

開発
4

Handlebars テンプレートには基本的なブール論理しか備わっていません。真理値 (truthy values) をチェックすることは可能です。

それ以上の複雑な処理を行うには、テンプレートに関連付けられた 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 ブロック内のコンテンツが表示されます。