Question

I have a simple mustache template setup that takes an object player and creates a list element. What’s the best way to perform a javascript method on a variable in mustache? Here’s some sample code:

var playerTemplate = '<li><span class="player-position">{{ position }}</span><span class="player-name">{{ first_name }} {{ last_name }}</span></li>';
var playerRow = Mustache.to_html(playerTemplate, player);
$('ul#players-list').append(playerRow);

what i’d like to do is something like:

{{ position.toUpperCase() }}

I’d rather not change the object itself, because i may want {{ position }} to not be upper case in other situations. Any tips on the cleanest smartest way to do this?

Thanks much.

Answer 1

Mustache is intentionally very simple (“Logic-less templates”) so there’s not a lot you can do. One option is to add a positionUC property:

player.positionUC = player.position.toUpperCase();

and then in the template:

{{positionUC}}

You can also add functions:

// Note that render(text) will be HTML though...
player.uc = function(text, render) { return render(text).toUpperCase() };

and then in the template:

{{#uc}}{{position}}{{/uc}}

Perhaps you could switch to Handlebars and add a helper to uppercase things.