web-dev-qa-db-ja.com

in Ember Handlebar Ifブロックヘルパーと等しい値をチェックします

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

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

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

if-statementember.jshandlebars.js
49
user1338121

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

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

その後、{{#if personIsJohn}}。

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

77
Jo Liss

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}}

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

// 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}}
26
Panagiotis Panagi

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

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

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

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

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

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

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

compare.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}}

等々。

7
Nitin9791

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

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

になる

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

Relavent Docs 。

4
Will Meldon