handlebars.js {{#if}}中的逻辑运算符是有条件的

本文翻译自：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}}   
    
 and condition completed
  
  {{/if}}
{{else}}   
  
 both conditions weren't true
  
{{/if}}

Edit: Conversely you can do or's by doing this: 编辑：反过来你可以这样做：

{{#if cond1}}  
  
 or condition completed
    
{{else}}   
  {{#if cond2}}  
    
 or condition completed
  
  {{else}}      
    
 neither of the conditions were true
    
  {{/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! 毕竟模板应该是无逻辑的！