本文翻译自:Logical operator in a handlebars.js {{#if}} conditional
Is there a way in handlebars JS to incorporate logical operators into the standard handlebars.js conditional operator? 在把手JS中是否有办法将逻辑运算符合并到标准handlebars.js条件运算符中? Something like this: 像这样的东西:
{{#if section1 || section2}}
.. content
{{/if}}
I know I could write my own helper, but first I'd like to make sure I'm not reinventing the wheel. 我知道我可以写自己的帮手,但首先我要确保我不会重新发明轮子。
#1楼
参考:https://stackoom.com/question/b9Ai/handlebars-js-if-中的逻辑运算符是有条件的
#2楼
Taking the solution one step further. 进一步采取解决方案。 This adds the compare operator. 这会添加比较运算符。
Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
switch (operator) {
case '==':
return (v1 == v2) ? options.fn(this) : options.inverse(this);
case '===':
return (v1 === v2) ? options.fn(this) : options.inverse(this);
case '!=':
return (v1 != v2) ? options.fn(this) : options.inverse(this);
case '!==':
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
case '<':
return (v1 < v2) ? options.fn(this) : options.inverse(this);
case '<=':
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
case '>':
return (v1 > v2) ? options.fn(this) : options.inverse(this);
case '>=':
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
case '&&':
return (v1 && v2) ? options.fn(this) : options.inverse(this);
case '||':
return (v1 || v2) ? options.fn(this) : options.inverse(this);
default:
return options.inverse(this);
}
});
Use it in a template like this: 在这样的模板中使用它:
{{#ifCond var1 '==' var2}}
Coffee Script version 咖啡脚本版
Handlebars.registerHelper 'ifCond', (v1, operator, v2, options) ->
switch operator
when '==', '===', 'is'
return if v1 is v2 then options.fn this else options.inverse this
when '!=', '!=='
return if v1 != v2 then options.fn this else options.inverse this
when '<'
return if v1 < v2 then options.fn this else options.inverse this
when '<='
return if v1 <= v2 then options.fn this else options.inverse this
when '>'
return if v1 > v2 then options.fn this else options.inverse this
when '>='
return if v1 >= v2 then options.fn this else options.inverse this
when '&&', 'and'
return if v1 and v2 then options.fn this else options.inverse this
when '||', 'or'
return if v1 or v2 then options.fn this else options.inverse this
else
return options.inverse this
#3楼
There is a simple way of doing this without writing a helper function... It can be done within the template completely. 有一种简单的方法可以在不编写辅助函数的情况下执行此操作......可以在模板中完成。
{{#if cond1}}
{{#if con2}}
<div> and condition completed</div>
{{/if}}
{{else}}
<div> both conditions weren't true</div>
{{/if}}
Edit: Conversely you can do or's by doing this: 编辑:反过来你可以这样做:
{{#if cond1}}
<div> or condition completed</div>
{{else}}
{{#if cond2}}
<div> or condition completed</div>
{{else}}
<div> neither of the conditions were true</div>
{{/if}}
{{/if}}
Edit/Note: From the handlebar's website: handlebarsjs.com here are the falsy values: 编辑/注意:从车把的网站:handlebarsjs.com这里是虚假值:
You can use the if helper to conditionally render a block. 您可以使用if帮助器有条件地渲染块。 If its argument returns false, undefined, null, "" or [] (a "falsy" value), Then any 'cond' (like cond1 or cond2) will not be counted as true. 如果它的参数返回false,undefined,null,“”或[](“falsy”值),那么任何'cond'(如cond1或cond2)都不会被计为true。
#4楼
I have found a npm package made with CoffeeScript that has a lot of incredible useful helpers for Handlebars. 我找到了一个用CoffeeScript制作的npm包,它为Handlebars提供了许多令人难以置信的有用助手。 Take a look of the documentation in the following URL: 请查看以下URL中的文档:
https://npmjs.org/package/handlebars-helpers https://npmjs.org/package/handlebars-helpers
You can do a wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz
to download them and see the contents of the package. 您可以执行wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz
下载它们并查看包的内容。
You will be abled to do things like {{#is number 5}}
or {{formatDate date "%m/%d/%Y"}}
您可以执行{{#is number 5}}
或{{formatDate date "%m/%d/%Y"}}
#5楼
Similar to Jim's answer but a using a bit of creativity we could also do something like this: 类似于吉姆的答案,但使用一点创造力我们也可以这样做:
Handlebars.registerHelper( "compare", function( v1, op, v2, options ) {
var c = {
"eq": function( v1, v2 ) {
return v1 == v2;
},
"neq": function( v1, v2 ) {
return v1 != v2;
},
...
}
if( Object.prototype.hasOwnProperty.call( c, op ) ) {
return c[ op ].call( this, v1, v2 ) ? options.fn( this ) : options.inverse( this );
}
return options.inverse( this );
} );
Then to use it we get something like: 然后使用它我们得到类似的东西:
{{#compare numberone "eq" numbretwo}}
do something
{{else}}
do something else
{{/compare}}
I would suggest moving the object out of the function for better performance but otherwise you can add any compare function you want, including "and" and "or". 我建议将对象移出函数以获得更好的性能,否则你可以添加任何你想要的比较函数,包括“和”和“或”。
#6楼
if you just want to check if one or the other element are present you can use this custom helper 如果您只想检查是否存在一个或另一个元素,则可以使用此自定义帮助程序
Handlebars.registerHelper('if_or', function(elem1, elem2, options) {
if (Handlebars.Utils.isEmpty(elem1) && Handlebars.Utils.isEmpty(elem2)) {
return options.inverse(this);
} else {
return options.fn(this);
}
});
like this 像这样
{{#if_or elem1 elem2}}
{{elem1}} or {{elem2}} are present
{{else}}
not present
{{/if_or}}
if you also need to be able to have an "or" to compare function return values I would rather add another property that returns the desired result. 如果你还需要能够有一个“或”比较函数返回值,我宁愿添加另一个返回所需结果的属性。
The templates should be logicless after all! 毕竟模板应该是无逻辑的!