Mustache.js + jQuery: what is the minimal working example ?

Question

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);
  });
}

thanks for the tip. I'm not looking for optimisation right now, I ant to make my code work — Jean-Philippe Caruana
I posted it as a comment and not an answer. Of course, the order in which you load your script includes also matters to making code work. If you're a beginner at JavaScript, this information is a critical 'must read'. Do all beginners know they need to load jQuery before they load jQueryUI or any other jQuery plugin? — Sparky
@Sparky672 to me it makes sense to load jQuery before any other jQuery related plugin. Thanks for the hint anyway — Jean-Philippe Caruana

Elias Zamaria Elias Zamaria · Accepted Answer · 2011-06-22T17:31:26

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.

Mustache.js + jQuery: what is the minimal working example ?

2 Answers