if-statement - 在 Ember Handlebar If block helper 中检查值是否等于

Question

我们如何检查ember.js的 If-block 助手中的值是否相等？

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

我们如何在车把上执行上述操作？

Answer 1

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

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

然后做{{#if personIsJohn}}。

注意：如果你觉得这太局限了，你也可以注册你自己更强大的ifhelper。

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

但是对于一般解决方案，您可以制作自己的助手，该助手将采用三个参数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')

相关文档。