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?

Answer 1

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.