Menu
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 : 
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 :
$.mustache.to_html function instead of the (documented on github) Mustache.to_html (thanks to @mikez302) $(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); }); }
400
Mustache is described as a logic-less system because it lacks any explicit control flow statements, like if and else conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and anonymous functions (lambdas).
Mustache is a logic-less templating system. It permits you to use pre-written text files with placeholders that will be replaced at run-time with values particular to a given request.
It works by expanding tags in a template using values provided in a hash or object. You can use Mustache to render templates anywhere include client side and server side environments. Mustache doesn't rely on procedural statements, there are no if statements, else clauses, or for loops.
Handlebars. js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars. js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be; Mustache: Logic-less templates.
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.
80
I know this question already ahs been answered, however I wrote a blog post on precisely this topic and thought I would share it here so anyone looking for examples of how to use Mustache with jQuery might see it.
http://blog.xoundboy.com/?p=535
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
