Implementing if conditions in Mustache template

Question

how can we check something like

       if( status == 0 ){
            //show pending
       }
       if( status == 1) {
            // show ok
       }
       if( status == 2 ){
            // done
       }

this in Mustache Library. Can we provide logic in templates??

score 4 · Accepted Answer · edited May 23 '17 at 12:05

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

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

I'd suggest giving Moxy-Stencil a try: https://github.com/dcmox/moxyscript-stencil

It is mostly logic-less but has support for helper parameters which seems to address most people's gripes with logic-less templates, eg:

{{{isActive home}}}

and in the View:

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

Implementing if conditions in Mustache template

2 Answers2