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 & action...

If notified_type == "Friendship" render ......

If notified_type == "Other && action == "invite" render.....

How does that work?

Possible duplicate of [How do I accomplish an if/else in mustache.js?](http://stackoverflow.com/questions/6027525/how-do-i-accomplish-an-if-else-in-mustache-js) — bjornte, Mar 09 '16 at 10:00

Lucas · Answer 1 · 2014-12-28T22:03:49.550

100

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

edited Dec 28 '14 at 22:03

answered Dec 28 '14 at 21:13

Lucas

2,814
2
25
34

5

Great job on showing how to to if true, and doing false as well! – Triforcey Jun 09 '16 at 18:21
3

This answer was actually better for me than the accepted one, as I wanted to use this in "automation for jira" plugin which uses mustache. – SVSchmidt Jul 19 '19 at 11:42
2

This is THE answer guys – Riccardo Manfrin Oct 14 '20 at 12:47

score 84 · Accepted Answer · edited Jun 14 '16 at 11:09

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" && 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.

this answer is not wrong, but the correct/better answer is [this one](https://stackoverflow.com/a/27680634/918858) — Dexter Legaspi, Mar 14 '21 at 14:32

score 34 · Answer 3 · answered Dec 18 '11 at 00:30

34

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).

answered Dec 18 '11 at 00:30

Dave Newton

152,765
23
240
286

score 16 · Answer 4 · answered Nov 21 '14 at 09:04

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) && 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}}

this bloats the mustache data, but is a usable and readable approach worth considering — SketchBookGames, Jan 27 '16 at 22:22

How to handle an IF STATEMENT in a Mustache template?

4 Answers4

Linked