How do I accomplish an if/else in mustache.js?

Question

It seems rather odd that I can't figure how to do this in mustache. Is it supported?

This is my sad attempt at trying:

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

This obviously isn't right, but the documentation doesn't mention anything like this. The word "else" isn't even mentioned :(

Also, why is mustache designed this way? Is this sort of thing considered bad? Is it trying to force me to set the default value in the model itself? What about the cases where that isn't possible?

"why is mustache designed this way?" I'm not too sure, but I think the idea is that a templating language should be just that: a language for writing templates, i.e. things that look like the output they produce, just with holes where the variable bits go. Putting logic in the template language makes the templates more complicated, and when you've already got a programming language to handle the logic bits, why bother? — Paul D. Waite, Sep 06 '13 at 11:05
@PaulD.Waite "Logic-less" really means "non-arbitrary code," I think. It's just as bad to put true view logic in code as it is to put non-view logic in a template. Mustache tries to provide a bare minimum logic to accomplish that. — jpmc26, Aug 21 '14 at 16:57
Or use [handlebars](http://handlebarsjs.com/builtin_helpers.html) instead of mustache. Being able to write, e.g. `{{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}` is more readable, much cleaner, and is still presentation. "Logic-less" is a guideline, it doesn't have to be a straitjacket. — skierpage, Jul 28 '15 at 05:08
Maybe it's not a versatile-enough templating engine when an OP says "this is my sad attempt [...] this obviously isn't right" ...and then the accepted answer is a copy-paste of that code :). No judgment on OP or answer; just on `mustache` — dwanderson, Sep 21 '17 at 17:31
if you're on PHP, try `sm-mustache`, i've implemented `|` else block to cut those extra declarations.. — Michael Quad, Jul 05 '21 at 02:02

score 579 · Accepted Answer · edited Jul 02 '21 at 08:04

579

This is how you do if/else in Mustache (perfectly supported):

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

Or in your case:

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

Look for inverted sections in the docs: https://github.com/janl/mustache.js#inverted-sections

edited Jul 02 '21 at 08:04

Community

1
1

answered Jun 25 '11 at 16:25

Eneko Alonso

18,884
9
62
84

132

The mustache docs are hilarious. "We call it "logic-less" because there are no if statements, else clauses, or for loops." Yeeeeaaaaaa.... – boxed Nov 10 '15 at 13:25
8

@boxed, technically you're right, the inverted section is a logical statement, as it checks the tag value. But, I think the nuance here is that both statements have to be explicitly evaluated, rather than a single if/else. Basically, mustache forces the structure `if (condition){ //do something}` followed by a `if (!condition){//do something else}`. Also, the amount of logic that one can perform in logic extremely reduced compared to a logic-based language. Existence or non-existence are the only checks, i.e. you can't check if the value of a tag equals 5 and then fall into that tag's code. – MandM Nov 13 '15 at 19:21
29

@MandM yea... so it has logic but it just can't do anything useful :P – boxed Jan 05 '16 at 12:30
1

It just keeps you way from messing with if else logic . Having a lot of nested if/else inside another if/else is a sign of misdesign – Tebe Dec 13 '17 at 12:41
@boxed you can do for loop with moustache.js (at least ngFor-ish loop) – aloisdg Jun 22 '18 at 08:26
basically I need something like this
means if some object available adding a class name but how can I do this with mustache ?

zEn feeLo

Nov 30 '18 at 21:18

Mustache is logic-less because indeed it forces you to put business logic outside of the view, which is a good thing. If you are wondering how to do an if/else in a view you're most likely doing it wrong, and should move that logic to the controller. Refactoring in that way keeps the views much cleaner and simpler. – laurent Dec 13 '20 at 12:49

BGerrissen · Answer 2 · 2012-11-05T17:16:47.430

This is something you solve in the "controller", which is the point of logicless templating.

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

This is actually a LOT better then maintaining image url's or other media that might or might not change in your templates, but takes some getting used to. The point is to unlearn template tunnel vision, an avatar img url is bound to be used in other templates, are you going to maintain that url on X templates or a single DEFAULTS settings object? ;)

Another option is to do the following:

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

And in the template:

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

But that's going against the whole meaning of logicless templating. If that's what you want to do, you want logical templating and you should not use Mustache, though do give it yourself a fair chance of learning this concept ;)

Thanks. That's a great response! It actually helped me with other structural aspects too about "when to do stuff" in the structure of the javascript code. — egervari, May 17 '11 at 08:34
{{/#hasAvatar}} and {{/#noAvatar}} should be {{/hasAvatar}} and {{/noAvatar}} in this answer. — Mulhoon, Aug 22 '12 at 10:27

score 17 · Answer 3 · edited May 21 '13 at 10:39

17

Your else statement should look like this (note the ^):

{{^avatar}}
 ...
{{/avatar}}

In mustache this is called 'Inverted sections'.

edited May 21 '13 at 10:39

Parv Sharma

12,581
4
48
80

answered Jun 21 '11 at 14:51

anonym

255
1
3

7

note that you don't need both # and ^, it's just ^ for 'not' case – zappan Sep 28 '11 at 15:00
That does not work in the latest version. Zappan is correct, you only need the ^ – simonmorley Jan 10 '13 at 22:43

score 13 · Answer 4 · answered May 26 '20 at 19:54

13

Note, you can use {{.}} to render the current context item.

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}

answered May 26 '20 at 19:54

Hafthor

16,358
9
56
65

score 0 · Answer 5 · answered Jan 24 '20 at 02:24

You can define a helper in the view. However, the conditional logic is somewhat limited. Moxy-Stencil (https://github.com/dcmox/moxyscript-stencil) seems to address this with "parameterized" helpers, eg:

and in the view:

view.isActive = function (path: string){ return path === this.path ? "class='active'" : '' }

How do I accomplish an if/else in mustache.js?

5 Answers5

Linked