Home/ Questions/Q 6067497
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:36:51+00:00

I would like to use mustache.js with jQuery in my HTML5 app, but I

  • 0

I would like to use mustache.js with jQuery in my HTML5 app, but I can’t make all the component work together. Every file is found, there is no problem here (the template is loaded roght, I can see its value in the Firebug debugguer).

Here is my index.html :

<!DOCTYPE html>
<html lang="fr">
    <head><meta charset="utf-8"></head>
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="../js/jquery.mustache.js"></script>
        <script src="../js/app.js"></script>
        <div id="content"></div>
    </body>
</html>

Here is my app.js file :

$(document).ready(function() {
    var template = $.get('../templates/article.mustache');
    $.getJSON('../js/article.json', function(view) {
        var html = Mustache.to_html(template, view);
        $("#content").append(html);
    });
});

The jquery.mustache.js file is the one generated from https://github.com/janl/mustache.js :

/*
Shameless port of a shameless port
@defunkt => @janl => @aq

See http://github.com/defunkt/mustache for more info.
*/

;(function($) {

// <snip> mustache.js code

  $.mustache = function(template, view, partials) {
    return Mustache.to_html(template, view, partials);
  };

})(jQuery);

Noting is displayed. Firebug tells me

Mustache is not defined

See capture :
enter image description here

I know something is missing, but I can’t tell what.

Thanks.

EDIT:
The correct and complete answer to a minimal example is the following :

  • write the template in the script, do not load it from a file
  • idem for the json data
  • read how the jQuery is generated and use $.mustache.to_html function instead of the (documented on github) Mustache.to_html (thanks to @mikez302)
  • refactor ’till you drop
$(document).ready(function() {
  var template = " ... {{title}} ... ";
  var json = {title: "titre article" }
  var article = $.mustache(template, json);
  $("#content").append(article);
});

But, it is easy to read the json from another file :

$(document).ready(function() {
  var template = " ... {{title}} ... ";
  $.getJSON('../js/article.json', function(view) {
    var article = $.mustache(template, view);
    $("#content").append(article);
  });
});

You can finally also read the template from a file :

$(document).ready(function() {
  $.getJSON('../js/article.json', function(view) {
    $.get("../templates/article.mustache", function(template) {
      var article = $.mustache(template, view);
      $("#content").append(article);
    });
  });
});

Working example (without loading order problems) :

$(document).ready(function() {
  $.getJSON('../js/article.json', function(model) { return onJSON(model); });
});

function onJSON(model) {
  $.get("../templates/article.mustache", function(view) {
    var article = $.mustache(view, model);
    $("#content").append(article);
  });
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In place of Mustache.to_html, try $.mustache. It looks to me like the Mustache variable is defined within the function, so it is not directly accessible outside of it.

    • 0