Handlebars js Else If

Question

I m using Handlebars js for client side view rendering   If Else works great but I ve encountered a 3 way conditional that requires ELSE IF   This doesn t work      if FriendStatus IsFriend         lt div class  ui-state-default ui-corner-all  title   ui-icon-mail-closed  gt  lt span class  ui-icon ui-icon-mail-closed  gt  lt  span gt  lt  div gt    else if FriendStatus FriendRequested        lt div class  ui-state-default ui-corner-all  title   ui-icon-check  gt  lt span class  ui-icon ui-icon-check  gt  lt  span gt  lt  div gt    else        lt div class  ui-state-default ui-corner-all  title   ui-icon-plusthick  gt  lt span class  ui-icon ui-icon-plusthick  gt  lt  span gt  lt  div gt     if     How do I do ELSE IF with handlebars

User · Answer

The spirit of handlebars is that it is  logicless   Sometimes this makes us feel like we are fighting with it  and sometimes we end up with ugly nested if else logic  You could write a helper  many people augment handlebars with a  better  conditional operator or believe that it should be part of the core  I think  though  that instead of this      if FriendStatus IsFriend      lt div class  ui-state-default ui-corner-all  title   ui-icon-mail-closed  gt  lt span class  ui-icon ui-icon-mail-closed  gt  lt  span gt  lt  div gt    else        if FriendStatus FriendRequested        lt div class  ui-state-default ui-corner-all  title   ui-icon-check  gt  lt span class  ui-icon ui-icon-check  gt  lt  span gt  lt  div gt      else        lt div class  ui-state-default ui-corner-all  title   ui-icon-plusthick  gt  lt span class  ui-icon ui-icon-plusthick  gt  lt  span gt  lt  div gt       if      if     you might want to arrange things in your model so that you can have this      if is friend       lt div class  ui-state-default ui-corner-all  title   ui-icon-mail-closed  gt  lt span class  ui-icon ui-icon-mail-closed  gt  lt  span gt  lt  div gt     if       if is not friend yet         lt div class  ui-state-default ui-corner-all  title   ui-icon-check  gt  lt span class  ui-icon ui-icon-check  gt  lt  span gt  lt  div gt     if       if will never be my friend         lt div class  ui-state-default ui-corner-all  title   ui-icon-plusthick  gt  lt span class  ui-icon ui-icon-plusthick  gt  lt  span gt  lt  div gt     if     Just make sure that only one of these flags is ever true  Chances are  if you are using this if elsif else in your view  you are probably using it somewhere else too  so these variables might not end up being superfluous   Keep it lean

User · Answer

Built-in Helpers   if   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   template   lt div class  entry  gt       if author        lt h1 gt   firstName     lastName   lt  h1 gt      else        lt h1 gt Unknown Author lt  h1 gt       if    lt  div gt    When you pass the following input to the above template      author  true    firstName   Yehuda     lastName   Katz

User · Answer

Hello I have only a MINOR classname edit  and so far this is how iv divulged it  i think i need to pass in multpile parameters to the helper   server js  app engine  handlebars   ViewEngine            helpers                    isActive   val  options   gt                       if  val     3    val     0                           return options fn this                                                            header handlebars   lt ul class  navlist  gt             lt li   class  navitem navlink    isActive 0  active   isActive                     gt  lt a href     gt Home lt  a gt  lt  li gt             lt li   class  navitem navlink    isActive 1  active   isActive                     gt  lt a href     gt Trending lt  a gt  lt  li gt             lt li   class  navitem navlink    isActive 2  active   isActive                     gt  lt a href     gt People lt  a gt  lt  li gt             lt li   class  navitem navlink    isActive 3  active   isActive                     gt  lt a href     gt Mystery lt  a gt  lt  li gt             lt li class  navitem navbar-search  gt               lt input type  text  id  navbar-search-input  placeholder  Search     gt               lt button type  button  id  navbar-search-button  gt  lt i class  fas fa-search  gt  lt  i gt  lt  button gt             lt  li gt           lt  ul gt

User · Answer

in handlebars first register a function like below Handlebars registerHelper  ifEquals   function arg1  arg2  options        return  arg1    arg2    options fn this    options inverse this        you can register more than one function   to add another function just add like below Handlebars registerHelper  calculate   function operand1  operator  operand2        let result      switch  operator            case                  result   operand1   operand2                          break          case  -               result   operand1 - operand2                          break          case                  result   operand1   operand2                          break          case                  result   operand1   operand2                          break             return Number result        and in HTML page just include the conditions like        ifEquals day  quot mon quot         lt  DOCTYPE html PUBLIC  quot -  W3C  DTD XHTML 1 0 Transitional  EN quot   quot http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd quot  gt       lt html xmlns  quot http   www w3 org 1999 xhtml quot  gt          html code goes here      lt  html gt       else ifEquals day  quot sun quot         lt html gt         html code goes here      lt  html gt       else          html code goes here       ifEquals

User · Answer

Handlebars supports   else if   blocks as of 3 0 0   Handlebars v3 0 0 or greater      if FriendStatus IsFriend      lt div class  ui-state-default ui-corner-all  title   ui-icon-mail-closed  gt  lt span class  ui-icon ui-icon-mail-closed  gt  lt  span gt  lt  div gt    else if FriendStatus FriendRequested      lt div class  ui-state-default ui-corner-all  title   ui-icon-check  gt  lt span class  ui-icon ui-icon-check  gt  lt  span gt  lt  div gt    else      lt div class  ui-state-default ui-corner-all  title   ui-icon-plusthick  gt  lt span class  ui-icon ui-icon-plusthick  gt  lt  span gt  lt  div gt     if     Prior to Handlebars v3 0 0  however  you will have to either define a helper that handles the branching logic or nest if statements manually      if FriendStatus IsFriend      lt div class  ui-state-default ui-corner-all  title   ui-icon-mail-closed  gt  lt span class  ui-icon ui-icon-mail-closed  gt  lt  span gt  lt  div gt    else        if FriendStatus FriendRequested        lt div class  ui-state-default ui-corner-all  title   ui-icon-check  gt  lt span class  ui-icon ui-icon-check  gt  lt  span gt  lt  div gt      else        lt div class  ui-state-default ui-corner-all  title   ui-icon-plusthick  gt  lt span class  ui-icon ui-icon-plusthick  gt  lt  span gt  lt  div gt       if      if

User · Answer

I usually use this form      if FriendStatus IsFriend           else      if FriendStatus FriendRequested           else            if     if

User · Answer

I wrote this simple helper   Handlebars registerHelper  conditions   function  options        var data   this      data   check conditions   true      return options fn this         Handlebars registerHelper  next   function conditional  options      if conditional  amp  amp  this   check conditions          this   check conditions   false        return options fn this       else         return options inverse this             It s something like Chain Of Responsibility pattern in Handlebars  Example          conditions              next condition1               Hello 1               next              next condition2               Hello 2               next              next condition3               Hello 3               next              next condition4               Hello 4               next          conditions     It s not a else if but in some cases it may help you

User · Answer

Handlebars now supports   else if   as of 3 0 0  Therefore  your code should now work   You can see an example under  conditionals   slightly revised here with an added   else            if isActive          lt img src  star gif  alt  Active  gt        else if isInactive          lt img src  cry gif  alt  Inactive  gt        else          lt img src  default gif  alt  default  gt         if     http   handlebarsjs com block helpers html

[handlebars.js] Handlebars.js Else If

Examples related to handlebars.js