95
rated 0 times
[
100]
[
5]
/ answers: 1 / hits: 23899
/ 13 Years ago, wed, june 22, 2011, 12:00:00
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 :
- 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_htmlfunction 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);
});
}
More From » jquery
