How to Accomplish an If/Else in Mustache.Js

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

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

how to: mustache if else statement

Alternatively mustache shortcodes use the # symbol for 'if' so assuming your shortcode is {{example}} then

{{#example}} 
    Start condition if example exists
{{/example}}

And ^ works the same way for 'if does not exist'

{{ ^example}}
    Start condition if example does not exist
{{/example}}

NOTE - If using mustache conditions you must must remember to close the condition the same way you would an HTML attribute.

How to handle an IF STATEMENT in a Mustache template?

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.

Mustache conditional statement (if/else) not working

This is a problem of using template tag, which is actually HTML5 template tag. Using hashes in it makes browser think that this is document fragment. Seems like nested document fragments corrupt Mustache template.

Just change it to script tag, as in mustache manual.

<script id="template2" type="x-tmpl-mustache">
  {{#users}}
    <tr>
      <td>{{name}}</td>
      <td>{{age}}</td>
      <td>{{language}}</td>                            
      {{#is_french}}
          <td>True</td>
      {{/is_french}}
      {{^is_french}}
          <td>False</td>
      {{/is_french}}
    </tr>
  {{/users}}
</script>

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

You can't do that using Mustache.

However, since you're interested in the value that equals 0 (falsy), you can do this:

/*
Template:
{{#objs}}
    {{^ItemIndex}}
        {{ItemIndex}}*
    {{/ItemIndex}}
    {{#ItemIndex}}
        {{ItemIndex}}
    {{/ItemIndex}}
{{/objs}}"
*/

var template = "{{#objs}}{{^ItemIndex}}{{ItemIndex}}*{{/ItemIndex}}{{#ItemIndex}}{{ItemIndex}}{{/ItemIndex}}\n\n{{/objs}}"

document.getElementsByTagName('body')[0].textContent = (Mustache.render(template, {objs: [
    {
        ItemIndex: 0
    }, 
    {
        ItemIndex: 1
    },    
    {
        ItemIndex: 2
    } 
]}))

// result => 0* 1 2

Fiddle

If you need if/else constructs in your templates and like the Mustache syntax, you should check out Handlebars.js.

How do I do an if with value in mustache.js?

Mustache allows you to use functions inside the template, you can add a function to your data and add the logic you want inside the template.

Consider the following template:

<script id="template" type="text/template">
       {{#.}}
          <tr>
              <td width="20%">{{checkPeso}}</td>
              <td width="20%">{{SECO}}</td>
              <td width="20%">{{Sul}}</td>
              <td width="20%">{{Nordeste}}</td>
              <td width="20%">{{Norte}}</td>
          </tr>
       {{/.}}
   </script>
<table id="target"></table>

The first variable is checkPeso which is the name of the function we will add to our data.

Consider the following data:

var data = [];
data.push({'SECO': 'val1a', 'Sul': 'val1b', 'Nordeste': 'val1c', 'Norte': 'val1d', 'peso': 0});
data.push({'SECO': 'val2a', 'Sul': 'val2b', 'Nordeste': 'val2c', 'Norte': 'val2d', 'peso': 2});
data.push({'SECO': 'val3a', 'Sul': 'val3b', 'Nordeste': 'val3c', 'Norte': 'val3d', 'peso': 4});

You simply add the function to the data object with the name checkPeso. Inside the function you have access to the data that is being rendered and you can access the data via this.

data.checkPeso = function () {
    if (this.peso === 2) return 'Leve';
    if (this.peso === 4) return 'Media';

    return 'Pesado';
};

Then, you render as usual your Mustache template:

var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, data);
$('#target').html(rendered);

See full demo here

Note: As it is correctly stated, Mustache is logic-less but it allows you to use functions and so you can add logic in your template.

How to use if-else as mustache grammar?

Vue uses interpolation with mustache syntax that works different from the post you've shared. Anything you write in {{}} gets evaluated by JavaScript.

So, you can write any kind of expression:

{{ 2 + 2 }} // output will be 4
{{ 'Hell World' }} // output: 'Hello World'

So, in your situation, you can write a ternary operator:

<tr v-for="(data, i) in userList" :key="i">
  <td>{{ data.authority === 1 ? 'Admin' : 'Not Admin' }}</td>
</tr>

If you want to only show a td element when user.authority === 1 you should use v-if or v-show instead.

You can use expressions and not statements inside {{}}. So a plain if/else would not work.

Implementing if conditions in Mustache template

The Mustache template language is explicitly as logic-less as possible.

However, you can use the section construct to do what you want. Add booleans for pending, ok and done to your object, then do:

{{#pending}}
// show pending
{{/pending}}

{{#ok}}
// show ok
{{/ok}}

{{#done}}
// show done
{{/done}}

This in effect moves the comparison logic to your actual code, which means the template can stay logic-less.

(You mentioned handlebars.js in your tags. If you're using Handlebars, you could theoretically extend the language by doing something like this, but that kind of goes against the idea of using a logic-less template language. You could even grab a collection of extensions, but by then I'd recommend going for another template language altogether.)

---

Related Topics