在Ember Handlebar中检查一个值是否等于的If块助手

Question

在Ember.js的If-block helper中，我们如何检查值的相等性？

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

如何在 Handlebars 中实现以上内容？

- user1338121

---

这个问题在Logical operator in a handlebars.js {{#if}} conditional也有答案。 - sumid

Answer 1

{{#if}}助手只能测试属性，而不是任意表达式。在这种情况下最好的做法是编写一个计算你想要测试的任何条件的属性。

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

那么就执行 {{#if personIsJohn}}。

注意：如果你觉得这太过限制，你也可以注册自己更强大的if助手。

- Jo Liss

---

@JoLiss 你能否从模板中将任意表达式传递给计算属性？ - Sam Selikoff

不，计算属性不能接受参数。因此，您需要为要测试的每个值创建一个单独的计算属性：personIsJohn，personIsMike，...或者注册一个新的类似于 if 的帮助程序 - 请参见我上面的编辑。 - Jo Liss

好答案。他们真的需要把这个放在Handlebars里。 - Edward

谢谢 @JoLiss - 这正是我今天需要的，可以在众多组织中过滤出仅一个。 - Dave Everitt

嗨，乔，我正在尝试类似的东西，但不成功。sectionfeedIsEqual: (function() { {{debugger}} return this.get('param1') === this.get('param2'); }.property('param1', 'param2') )但是我没有得到param1和param2的值。 - plzdontkillme

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

您可以使用 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}}

- Panagiotis Panagi

Answer 3

如果您使用HTMLBars（Ember版本1.10+），则可以使用Ember Truth Helper插件：https://github.com/jmurphyau/ember-truth-helpers。安装后，只需这样简单的操作：

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

- Johnny Oshika

---

可以不使用Ember CLI使用它吗？ - Abbasov Alexander

@AbbasovAlexander：我没有尝试过不使用Ember CLI，但我认为应该是可以的。 - Johnny Oshika

这不是原始的Handlebars。 - doublejosh

@doublejosh 你需要安装Truth Helper插件。 :-) - Johnny Oshika

Answer 4

尽管可以通过编写eq助手来解决这个问题

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

但是要想获得通用解决方案，您可以创建自己的帮助程序，它将需要三个参数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}}

等等。

- Nitin9791

Answer 5

在Jo Liss的回答基础上，你现在可以使用计算属性宏来实现更加简洁和易读的代码。

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

变成

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

相关文档。

- Will