CODEWITHSUNDEEP
jqueryhandlebars.jsmustache
dotNetNewbie
dotNetNewbie

Reputation: 789

Conditional rendering possible?

Is it possible to do conditional rendering using Mustache? Example: If I want to display a different value based on the status of X? eg.

if x.value=1
                        <td>                                            
                            <span class="label label-success">{{this.X1}}</span></td>                       
else x.value=2                                                              
                        <td>                                            
                            <span class="label label-warning"{{this.X2}}</span></td>
else if x.value=3                         
                        <td>                                            
                            <span class="label label-inverse"{{this.X3}}</span> </td>

Upvotes: 0

Views: 1699

Answers (2)

dotNetNewbie
dotNetNewbie

Reputation: 789

After digging into the documentation, I found that this can be achieved using the Helpers:

Handlebars.registerHelper('HelperName', function (status) {
            var statusClass = {
                '1': 'label-inverse',
                '2': 'label-important',
                '3': 'label-warning',
                '4': 'label-success'
            };
            return statusClass[status];
        });

and using it in the template like:

<td>                                            
<span class="label {{HelperName this.myStatus}}">TEXT</span>                                
</td>

Upvotes: 2

Gho5t
Gho5t

Reputation: 1060

I believe the only thing you can do is check boolean properties e.g.

{{#IsLate}}
    <span class="late">You owe me money, sucka.</span>
{{/IsLate}}
{{^IsLate}}
    <span class="on-time">No money due at this time.</span>
{{/IsLate}}

You may want to look into constructing a new wrapper object that suits your needs.

Upvotes: 5

Related Questions