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

畢竟模闆應該是無邏輯的！