Call methods on mustache variable in a template

javascript, jquery, mustache

Solution

you need to pass the function as part of the data, like so:

$(function() {
      $.getJSON('/cats.json', function(data){
        data.lower = function () {
          return function (text, render) {
             //wrong line return render(text.toLowerCase());
             return render(text).toLowerCase();
          }
        };
        var template = $("#mytemplate").html();
        var view     = Mustache.to_html(template, data);
        $("tbody").html(view);
      });
  })

and the template:

<tr data-index="{{age}}-{{#lower}}{{name}}{{/lower}}"></tr>

Problem

I have a mustache template and I would like to call some function on the mustache variables ({{name}} in this case). Specifically, I want to call toLowerCase() method on the name variable. ``` <tbody> <script id="mytemplate" type="text/template"> {{#cat}} <tr data-index="{{age}}-{{name}}"></tr> {{/cat}} </script> </tbody> ``` I tried looking in the mustache docs but I couldn't find out how to do this. I tried doing - `<tr data-index="{{age}}-{{name.toLowerCase()}}"></tr>` - `<tr data-index="{{age}}-{{name}}.toLowerCase()"></tr>` But I'm not getting what I expect. I render the template with this code which gets triggered on document ready. ``` $(function() { $.getJSON('/cats.json', function(data){ var template = $("#mytemplate").html(); var view = Mustache.to_html(template, data); $("tbody").html(view); }); }) ```

Original source