[英]Check for a value equals to in Ember Handlebar If block helper
The {{#if}}
helper can only test for properties, not arbitrary expressions. {{#if}}
帮助程序只能测试属性,而不能测试任意表达式。 The best thing to do in cases like this is therefore to write a property computing whatever conditional you want to test for. 因此,在这种情况下,最好的办法是编写一个属性,计算您想要测试的条件。
personIsJohn: function() {
return this.get('person') === 'John';
}.property('person')
Then do {{#if personIsJohn}}
. 然后做
{{#if personIsJohn}}
。
Note: If you find this too limiting, you can also register your own more powerful if
helper . 注意:如果你觉得这太受限制,你也可以注册自己的功能更强大
if
帮手 。
Use an Ember.Component
, thus avoid repetitively defining computed properties in your classes (like personIsJohn
above): 使用
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}}
You can define the else part of the comparison, with an App.ElseEqualComponent
: 您可以使用
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}}
If you're using HTMLBars (Ember version 1.10+), then you can use the Ember Truth Helper addon: 如果您使用的是HTMLBars(Ember版本1.10+),那么您可以使用Ember Truth Helper插件:
https://github.com/jmurphyau/ember-truth-helpers https://github.com/jmurphyau/ember-truth-helpers
Once installed, it'll be as simple as this: 安装完成后,它就像这样简单:
{{#if (eq person "John")}} hello {{/if}}
although this problem can be solved using eq helper by writing 虽然这个问题可以通过写作使用eq helper来解决
{{#if (eq person "John")}} hello {{/if}}
but for a general solution you can make your own helper which will take three params param[0]
and param[2]
being operand and param[1]
being operator. 但是对于一般解决方案,你可以制作自己的助手,它将采用三个参数
param[0]
和param[2]
作为操作数, param[1]
作为运算符。 Below is the helper file. 下面是帮助文件。
compare.js 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);
now you can easily use it for multiple purpose. 现在您可以轻松地将其用于多种用途。
for equality check. 用于平等检查。
{{#if (compare person '===' 'John')}} {{/if}}
for greater check. 更好的检查。
{{#if (compare money '>' 300)}} {{/if}}
and so on. 等等。
Expanding on Jo Liss's answer, you can now do this using a computed property macro for more concise and readable code. 扩展Jo Liss的答案,您现在可以使用计算属性宏来实现此更简洁和可读的代码。
personIsJohn: function() {
return this.get('person') === 'John';
}.property('person')
becomes 变
personIsJohn: Ember.computed.equal('person', 'John')
Relavent Docs . 相关文件 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.