Logical operator in a handlebars js if conditional

Question

Is there a way in handlebars JS to incorporate logical operators into the standard handlebars js conditional operator  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

User · Answer

Install Ember Truth Helpers addon by running the below command

ember install ember-truth-helpers

you can start use most of the logical operators(eq,not-eq,not,and,or,gt,gte,lt,lte,xor).

{{#if (or section1 section2)}}  
...content  
{{/if}}

You can even include subexpression to go further,

{{#if (or (eq section1 "section1") (eq section2 "section2") ) }}  
...content  
{{/if}}

User · Answer

Correct Solution for AND OR  Handlebars registerHelper  and   function             Get function args and remove last one  function name      return Array prototype slice call arguments  0  arguments length - 1  every Boolean       Handlebars registerHelper  or   function             Get function args and remove last one  function name      return Array prototype slice call arguments  0  arguments length - 1  some Boolean          Then call as follows     if  or  eq questionType  STARTTIME    eq questionType  ENDTIME               BTW  Note that the solution given here is incorrect  he s not subtracting the last argument which is the function name  https   stackoverflow com a 31632215 1005607  His original AND OR was based on the full list of arguments     and  function              return Array prototype slice call arguments  every Boolean              or  function              return Array prototype slice call arguments  some Boolean           Can someone change that answer  I just wasted an hour trying to fix something in an answer recommended by 86 people  The fix is to filter out the last argument which is the function name  Array prototype slice call arguments  0  arguments length - 1

User · Answer

Here we have vanilla handlebars for multiple logical  amp  amp  and     and or    Handlebars registerHelper  and  function         var args   Array prototype slice call arguments       var options   args args length-1        for var i 0  i lt args length-1  i             if   args i                 return options inverse this                        return options fn this         Handlebars registerHelper  or  function         var args   Array prototype slice call arguments       var options   args args length-1        for var i 0  i lt args length-1  i             if  args i                 return options fn this                        return options inverse this         Results       and foo bar sally bob   yup   else   nope    and      yup       or foo bar    sally bob   yup   else   nope    or      yup        and foo bar    sally bob   yup   else   nope    and      nope       or                  yup   else   nope    or      nope   Not so sure if it s  safe  to use  and  and  or     maybe change to something like  op and  and  op or

User · Answer

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

User · Answer

Improved solution that basically work with any binary operator  at least numbers  strings doesn t work well with eval  TAKE CARE OF POSSIBLE SCRIPT INJECTION IF USING A NON DEFINED OPERATOR WITH USER INPUTS    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   amp  amp                return  v1 amp  amp v2  options fn this  options inverse this            case                   return  v1  v2  options fn this  options inverse this            case   lt                return  v1 lt v2  options fn this  options inverse this            case   lt                 return  v1 lt  v2  options fn this  options inverse this            case   gt                return  v1 gt v2  options fn this  options inverse this            case   gt              return  v1 gt  v2  options fn this  options inverse this            default              return eval    v1 operator v2  options fn this  options inverse this

User · Answer

One problem with all of the answers posted here is that they don t work with bound properties  i e  the if condition is not re-evaluated when the properties involved change   Here s a slightly more advanced version of the helper supporting bindings   It uses the bind function from the Ember source  which is also used to implement the normal Ember  if helper   This one is limited to a single bound property on the left-hand side  comparing to a constant on the right-hand side  which I think is good enough for most practical purposes   If you need something more advanced than a simple comparison  then perhaps it would be good to start declaring some computed properties and using the normal  if helper instead   Ember Handlebars registerHelper  ifeq   function a  b  options      return Ember Handlebars bind call options contexts 0   a  options  true  function result        return result     b              You can use it like this      ifeq obj some property  something      They are equal     ifeq

User · Answer

Yet another crooked solution for a ternary helper          condition  first  second       return condition   first   second      lt span gt      fooExists  found it   nope  sorry    lt  span gt    Or a simple coalesce helper          first  second       return first   first   second      lt span gt      foo bar   lt  span gt    Since these characters don t have a special meaning in handlebars markup  you re free to use them for helper names

User · Answer

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

User · Answer

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   lt                return  v1  lt  v2    options fn this    options inverse this           case   lt                 return  v1  lt   v2    options fn this    options inverse this           case   gt                return  v1  gt  v2    options fn this    options inverse this           case   gt                 return  v1  gt   v2    options fn this    options inverse this           case   amp  amp                return  v1  amp  amp  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  - gt      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   lt               return if v1  lt  v2 then options fn this else options inverse this         when   lt                return if v1  lt   v2 then options fn this else options inverse this         when   gt               return if v1  gt  v2 then options fn this else options inverse this         when   gt                return if v1  gt   v2 then options fn this else options inverse this         when   amp  amp     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

User · Answer

Unfortunately none of these solutions solve the problem of  OR  operator  cond1    cond2     Check if first value is true Use      or  and check if otherwise cond2 is true     if cond1       DO THE ACTION              if cond2           DO THE ACTION        if      if     It breaks DRY rule  So why not use partial to make it less messy     if cond1          gt  subTemplate                if cond2              gt  subTemplate          if      if

User · Answer

Just came to this post from a google search on how to check if a string equals another string   I use HandlebarsJS in NodeJS server-side  but I also use the same template files on the front-end using the browser version of HandlebarsJS to parse it  This meant that if I wanted a custom helper  I d have to define it in 2 separate places  or assign a function to the object in question - too much effort    What people forget is that certain objects have inherit functions that can be used in the moustache template  In the case of a string   https   developer mozilla org en-US docs Web JavaScript Reference Global Objects String match  An Array containing the entire match result and any parentheses-captured matched results  null if there were no matches   We can use this method to return either an array of matches  or null if no matches were found  This is perfect  because looking at the HandlebarsJS documentation http   handlebarsjs com builtin helpers html  You can use the if helper to conditionally render a block  If its argument returns false  undefined  null      0  or     Handlebars will not render the block   So        if your string match  what youre looking for     String found      else   No match found       if     UPDATE    After testing on all browsers  this doesn t work on Firefox  HandlebarsJS passes other arguments to a function call  meaning that when String prototype match is called  the second argument  i e  the Regexp flags for the match function call as per above documentation  appears to be being passed  Firefox sees this as a deprecated use of String prototype match  and so breaks   A workaround is to declare a new functional prototype for the String JS object  and use that instead   if typeof String includes      function         String prototype includes   function str            if   str instanceof RegExp               str   new RegExp  str     escapeRegExp    g            return str test this             Ensure this JS code is included before you run your Handlebars compile   function  then in your template        your string          if  includes  what youre looking for              String found          else           No match found           if      your string

User · Answer

You can do it simply by using the logical operator like this shown below      if  or eq firstValue  String to compare value    eq secondValue  String to compare value     business logic goes here   if       if  and eq firstValue  String to compare value    eq secondValue  String to compare value     business logic goes here   if     Before closing if you can write your business logic

User · Answer

In Ember js you can use inline if helper in if block helper  It can replace    logical operator  for example      if  if firstCondition firstCondition secondCondition       firstCondition     or  secondCondition      true    if

User · Answer

For those having problems comparing object properties  inside the helper add this solution  Ember js helper not properly recognizing a parameter

User · Answer

This is possible by  cheating  with a block helper  This probably goes against the Ideology of the people who developed Handlebars   Handlebars registerHelper  ifCond   function v1  v2  options      if v1     v2        return options fn this         return options inverse this         You can then call the helper in the template like this     ifCond v1 v2         v1   is equal to   v2     else         v1   is not equal to   v2      ifCond

User · Answer

Following these 2 guides a-way-to-let-users-define-custom-made-bound-if-statements and custom bound helpers I was able to adjust my shared views in this post on stackoverflow to use this instead of the standard  if statement  This should be more secure than just tossing an  if in there     The custom bound helpers in that gist are outstanding     lt li gt       lt a href    unbound view varProductSocialBlog    gt             if-equal view showDiv  true    lt div gt    if-equal   lt i class  fa fa-rss-square  gt  lt  i gt    if-equal view showDiv  true    lt  div gt    if-equal              if-equal view showTitle  true   Blog   if-equal        lt  a gt   lt  li gt    I am using the ember cli project to build my ember application   Current setup at the time of this post   DEBUG  ------------------------------- DEBUG  Ember        1 5 1 DEBUG  Ember Data   1 0 0-beta 7 canary b45e23ba DEBUG  Handlebars   1 3 0 DEBUG  jQuery       2 1 1 DEBUG  -------------------------------

User · Answer

You can use the following code      if selection1       doSomething1   else         if selection2          doSomething2       if      if

User · Answer

taking this one up a notch  for those of you who live on the edge   gist  https   gist github com akhoury 9118682 Demo  Code snippet below  Handlebars Helper     xif EXPRESSION     else      xif    a helper to execute an IF statement with any expression   EXPRESSION is a properly escaped String  Yes you NEED to properly escape the string literals or just alternate single and double quotes  you can access any global function or property i e  encodeURIComponent property  this example assumes you passed this context to your handlebars template   name   Sam   age   20       notice age is a string  just for so I can demo parseInt   later in this post   Usage    lt p gt      xif   name     Sam   amp  amp  age      12          BOOM    else      BAMM     xif    lt  p gt    Output   lt p gt    BOOM  lt  p gt    JavaScript   it depends on another helper- keep reading    Handlebars registerHelper  xif   function  expression  options        return Handlebars helpers  x   apply this   expression  options     options fn this    options inverse this           Handlebars Helper    x EXPRESSION    A helper to execute javascript expressions   EXPRESSION is a properly escaped String   Yes you NEED to properly escape the string literals or just alternate single and double quotes  you can access any global function or property i e  parseInt property  this example assumes you passed this context to your handlebars template   name   Sam   age   20       age is a string for demo purpose  it can be anything     Usage    lt p gt Url    x   hi    name          window location href      lt ---- this is your href       your Age is     parseInt this age  10     lt  p gt    Output    lt p gt Url  hi Sam  http   example com  lt ---- this is your href  your Age is  20 lt  p gt    JavaScript   This looks a little large because I expanded syntax and commented over almost each line for clarity purposes   x000D   x000D  Handlebars registerHelper  x   function expression  options    x000D    var result  x000D   x000D       you can change the context  or merge it with options data  options hash x000D    var context   this  x000D   x000D       yup  i use  with  here to expose the context s properties as block variables x000D       you don t need to do   x  this age   2    x000D       but you can also do   x  age   2    x000D       HOWEVER including an UNINITIALIZED var in a expression will return undefined as the result  x000D    with context    x000D      result    function     x000D        try   x000D          return eval expression   x000D          catch  e    x000D          console warn     Expression    x       expression         n   JS-Error     e    n   Context     context   x000D          x000D         call context      to make eval s lexical this context x000D      x000D    return result  x000D      x000D   x000D  Handlebars registerHelper  xif   function expression  options    x000D    return Handlebars helpers  x   apply this   expression  options     options fn this    options inverse this   x000D      x000D   x000D  var data      x000D    firstName   Joan   x000D    age   21   x000D    email   joan aaa bbb  x000D       x000D    firstName   Sam   x000D    age   18   x000D    email   sam aaa bbb  x000D       x000D    firstName   Perter   x000D    lastName   Smith   x000D    age   25   x000D    email   joseph aaa bbb  x000D      x000D   x000D  var source       template   html    x000D  var template   Handlebars compile source   x000D      main   html template data    x000D  h1   x000D    font-size  large  x000D    x000D   content   x000D    padding  10px  x000D    x000D   person   x000D    padding  5px  x000D    margin  5px  x000D    border  1px solid grey  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   cdnjs cloudflare com ajax libs handlebars js 1 0 0 handlebars min js  gt  lt  script gt  x000D   x000D   lt script id  template  type  text x-handlebars-template  gt  x000D     lt div class  content  gt  x000D         each this   x000D       lt div class  person  gt  x000D         lt h1 gt   x    Hi     firstName       x  lastName    lt  h1 gt  x000D         lt div gt   x   you were born in       new Date    getFullYear   - parseInt this age  10       lt  div gt  x000D           xif  parseInt age   gt   21    login here  x000D         lt a href  http   foo bar email   x  encodeURIComponent email      gt  x000D           http   foo bar email   x  encodeURIComponent email     x000D           lt  a gt  x000D          else   Please go back when you grow up     xif   x000D       lt  div gt  x000D         each   x000D     lt  div gt  x000D   lt  script gt  x000D   x000D   lt div id  main  gt  lt  div gt  x000D   x000D   x000D    Moar  if you want access upper level scope  this one is slightly different  the expression is the JOIN of all arguments   usage  say context data looks like this      data  name   Sam   age   20   address    city   yomomaz          in template    notice how the expression wrap all the string with quotes  and even the variables    as they will become strings by the time they hit the helper    play with it  you will immediately see the errored expressions and figure it out     with address         z   hi           this name        you live with        city           with     Javascript   Handlebars registerHelper  z   function          var options   arguments arguments length - 1      delete arguments arguments length - 1       return Handlebars helpers  x   apply this   Array prototype slice call arguments  0  join      options         Handlebars registerHelper  zif   function          var options   arguments arguments length - 1      delete arguments arguments length - 1       return Handlebars helpers  x   apply this   Array prototype slice call arguments  0  join      options     options fn this    options inverse this

User · Answer

I have found a npm package made with CoffeeScript that has a lot of incredible useful helpers for Handlebars  Take a look of the documentation in the following URL   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   You will be abled to do things like    is number 5   or   formatDate date   m  d  Y

User · Answer

Handlebars supports nested operations  This provides a lot of flexibility  and cleaner code  if we write our logic a little differently      if  or section1 section2       content    if     In fact  we can add all sorts of logic      if  or           eq section1  foo            ne section2  bar         content    if     Just register these helpers   Handlebars registerHelper       eq   v1  v2    gt  v1     v2      ne   v1  v2    gt  v1     v2      lt   v1  v2    gt  v1  lt  v2      gt   v1  v2    gt  v1  gt  v2      lte   v1  v2    gt  v1  lt   v2      gte   v1  v2    gt  v1  gt   v2      and             return Array prototype every call arguments  Boolean              or             return Array prototype slice call arguments  0  -1  some Boolean

User · Answer

Here s a solution if you want to check multiple conditions      Handler to check multiple conditions         Handlebars registerHelper  checkIf   function  v1 o1 v2 mainOperator v3 o2 v4 options          var operators                      function a  b   return a  b                     function a  b   return a   b                    function a  b   return a  b                     function a  b   return a   b                lt    function a  b   return a lt b                lt     function a  b   return a lt  b                gt    function a  b   return a gt b                gt     function a  b   return a gt  b                amp  amp    function a  b   return a amp  amp b                    function a  b   return a  b                   var a1   operators o1  v1 v2         var a2   operators o2  v3 v4         var isTrue   operators mainOperator  a1  a2         return isTrue   options fn this    options inverse this           Usage      if list length gt 0  amp  amp  public          checkIf list length   gt   0   amp  amp   public      true    lt p gt condition satisfied lt  p gt    checkIf

User · Answer

Here s an approach I m using for ember 1 10 and ember-cli 2 0      app helpers js-x js export default Ember HTMLBars makeBoundHelper function  params      var paramNames   params slice 1  map function val  idx    return  p    idx        var func   Function apply this  paramNames concat  return     params 0            return func apply params 1      undefined   this   params 1   params slice 1          Then you can use it in your templates like this      used as sub-expression    each item in model        if  js-x  this section1    this section2  item         if      each       used normally   js-x  p0    p1  model name model offer name     Where the arguments to the expression are passed in as p0 p1 p2 etc and p0 can also be referenced as this

User · Answer

One other alternative is to use function name in  if  The  if will detect if the parameter is function and if it is then it will call it and use its return for truthyness check  Below myFunction gets current context as this      if myFunction     I m Happy     if

User · Answer

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           lt div gt  and condition completed lt  div gt         if     else         lt div gt  both conditions weren t true lt  div gt       if     Edit  Conversely you can do or s by doing this        if cond1        lt div gt  or condition completed lt  div gt        else           if cond2          lt div gt  or condition completed lt  div gt        else              lt div gt  neither of the conditions were true lt  div gt           if        if     Edit Note  From the handlebar s website  handlebarsjs com here are the falsy values       You can use the if helper to conditionally render a block  If its   argument returns false  undefined  null     or     a  falsy  value     Then any  cond   like cond1 or cond2  will not be counted as true

User · Answer

I can understand why you would want to create a helper for situations where you have a large number of varied comparisons to perform within your template  but for a relatively small number of comparisons  or even one  which was what brought me to this page in the first place   it would probably just be easier to define a new handlebars variable in your view-rendering function call  like   Pass to handlebars on render   var context         section1    section1       section2    section2       section1or2     section1    section2       and then within your handlebars template      if section1or2          content    if     I mention this for simplicity s sake  and also because it s an answer that may be quick and helpful while still complying with the logicless nature of Handlebars

User · Answer

Here s a link to the block helper I use   comparison block helper   It supports all the standard operators and lets you write code as shown below   It s really quite handy      compare Database Tables Count   gt   5   There are more than 5 tables    compare

[javascript] Logical operator in a handlebars.js {{#if}} conditional

Examples related to javascript

Examples related to handlebars.js