How to handle an IF STATEMENT in a Mustache template

Question

I m using mustache  I m generating a list of notifications  A notification JSON object looks like      id  1364  read  true  author id  30  author name   Mr A   author photo   image jpg   story   wants to connect   notified type   Friendship   action   create      With mustache  how can I do a if statement or case statement based on the notified type  amp  action     If notified type     Friendship  render         If notified type     Other  amp  amp  action     invite  render       How does that work

User · Accepted Answer

Mustache templates are  by design  very simple  the homepage even says      Logic-less templates    So the general approach is to do your logic in JavaScript and set a bunch of flags   if notified type     Friendship       data type friendship   true  else if notified type     Other   amp  amp  action     invite       data type other invite   true          and then in your template      type friendship       friendship       type friendship      type other invite       invite       type other invite     If you want some more advanced functionality but want to maintain most of Mustache s simplicity  you could look at Handlebars      Handlebars provides the power necessary to let you build semantic templates effectively with no frustration       Mustache templates are compatible with Handlebars  so you can take a Mustache template  import it into Handlebars  and start taking advantage of the extra Handlebars features

User · Answer

In general  you use the   syntax      a boolean     I only show up if the boolean was true     a boolean     The goal is to move as much logic as possible out of the template  which makes sense

User · Answer

I have a simple and generic hack to perform key value if statement instead of boolean-only in mustache  and in an extremely readable fashion      function buildOptions  object        var validTypes     string    number    boolean        var value      var key      for  key in object            value   object key           if  object hasOwnProperty key   amp  amp  validTypes indexOf typeof value      -1                object key         value    true                      return object      With this hack  an object like this   var contact        id   1364     author name    Mr Nobody      notified type    friendship      action    create       Will look like this before transformation   var contact        id   1364     id 1364   true     author name    Mr Nobody      author name Mr Nobody   true     notified type    friendship      notified type friendship   true     action    create      action create   true      And your mustache template will look like this      notified type friendship       friendship       notified type friendship       notified type invite       invite       notified type invite

User · Answer

Just took a look over the mustache docs and they support  inverted sections  in which they state     they  inverted sections  will be rendered if the key doesn t exist  is false  or is an empty list   http   mustache github io mustache 5 html Inverted-Sections     value     value is true    value      value     value is false    value

[javascript] How to handle an IF STATEMENT in a Mustache template?

Examples related to javascript

Examples related to templates

Examples related to mustache