Using Handlebars for conditional CSS - handlebars.js

Question

In the snippet below I'd expect row a to have the class new-entry and row c to have the class moving-up but neither does.
I'm certain this is a silly mistake but I can't see it
Handlebars.registerHelper("newEntry", function() {
return this.newEntry ? 'class="new-entry"' : '';
});
Handlebars.registerHelper("movingUp", function() {
return this.movingUp ? 'class="moving-up"' : '';
});
var source = document.getElementById('leaderboard-template').innerHTML;
var template = Handlebars.compile(source);
var outlet = document.getElementById('outlet');
outlet.innerHTML = template({leaders: [
{name: 'a', signature_count: 10, newEntry: true},
{name: 'b', signature_count: 8},
{name: 'c', signature_count: 6, movingUp: false},
]});
.new-entry {
background-color:red;
}
.moving-up {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script id="leaderboard-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Constituency</th>
<th>Votes</th>
</thead>
<tbody>
{{#leaders}}
<tr {{newEntry}}>
<td>{{name}}</td>
<td><span {{movingUp}}>{{signature_count}}</span></td>
</tr>
{{/leaders}}
</tbody>
</table>
</script>
<div id="outlet"></div>

Answer 1

Handlebar converts the return value of a helper to an HTML escaped string. Use Handlebars.SafeString like this if you don't want that:
Handlebars.registerHelper("newEntry", function() {
return new Handlebars.SafeString( this.newEntry ? 'class="new-entry"' : '' );
});
Handlebars.registerHelper("movingUp", function() {
return new Handlebars.SafeString( this.movingUp ? 'class="moving-up"' : '' );
});