if-statement - Ember Handlebar If ブロック ヘルパーで値が等しいかどうかを確認します

Question

ember.jsの If-block ヘルパーで値が等しいことを確認するにはどうすればよいですか?

{{#if person=="John"}}

ハンドルバーで上記をどのように実行しますか?

Answer 1

{{#if}}ヘルパーはプロパティのみをテストでき、任意の式はテストできません。したがって、このような場合に行う最善の方法は、テストしたい条件を計算するプロパティを作成することです。

personIsJohn: function() {
  return this.get('person') === 'John';
}.property('person')

次に、実行します{{#if personIsJohn}}。

注: これがあまりにも制限的であると思われる場合は、独自のより強力なifヘルパーを登録することもできます。

Answer 2

を使用してEmber.Component、クラスで繰り返し計算されたプロパティを定義しないようにします (personIsJohn上記のように)。

// if_equal_component.js script
App.IfEqualComponent = Ember.Component.extend({
  isEqual: function() {
    return this.get('param1') === this.get('param2');
  }.property('param1', 'param2')
});

// if-equal.handlebars template
{{#if isEqual}}
  {{yield}}
{{/if}}

を使用して、比較の else 部分を定義できますApp.ElseEqualComponent。

// else_equal_component.js script
App.ElseEqualComponent = App.IfEqualComponent.extend();

// else-equal.handlebars template
{{#unless isEqual}}
  {{yield}}
{{/unless}}

使用法：

{{#if-equal param1=person param2="John"}}
  Hi John!
{{/if-equal}}
{{#else-equal param1=person param2="John"}}
  Who are you?
{{/else-equal}}

Answer 3

HTMLBars (Ember バージョン 1.10 以降) を使用している場合は、Ember Truth Helperアドオンを使用できます。

https://github.com/jmurphyau/ember-truth-helpers

インストールが完了すると、次のように簡単になります。

{{#if (eq person "John")}} hello {{/if}}

Answer 4

この問題は、次のように書くことで eq ヘルパーを使用して解決できますが、

{{#if (eq person "John")}} hello {{/if}}

しかし、一般的な解決策として、3つのパラメーターを取り、オペランドとparam[0]演算子である独自のヘルパーを作成できます。以下はヘルパーファイルです。param[2]param[1]

比較.js

import Ember from 'ember';

export function compare(params) {
  if(params[3]){  //handle case insensitive conditions if 4 param is passed.
    params[0]= params[0].toLowerCase();
    params[2]= params[2].toLowerCase();
  }
  let v1 = params[0];
  let operator = params[1];
  let v2 = params[2];
  switch (operator) {
    case '==':
      return (v1 == v2);
    case '!=':
      return (v1 != v2);
    case '===':
      return (v1 === v2);
    case '<':
      return (v1 < v2);
    case '<=':
      return (v1 <= v2);
    case '>':
      return (v1 > v2);
    case '>=':
      return (v1 >= v2);
    case '&&':
      return !!(v1 && v2);
    case '||':
      return !!(v1 || v2);
    default:
      return false;
  }
}

export default Ember.Helper.helper(compare);

多目的に簡単に使用できるようになりました。

等値チェック用。

{{#if (compare person '===' 'John')}} {{/if}}

より大きなチェックのために。

{{#if (compare money '>' 300)}} {{/if}}

等々。

Answer 5

Jo Liss の回答を拡張すると、計算されたプロパティ マクロを使用して、より簡潔で読みやすいコードを作成できるようになりました。

personIsJohn: function() {
  return this.get('person') === 'John';
}.property('person')

になる

personIsJohn: Ember.computed.equal('person', 'John')

関連ドキュメント。