Mustache.js + jQuery：什么是最小的工作示例？ [英] Mustache.js + jQuery: what is the minimal working example ?
问题描述
我想在我的HTML5应用程序中使用带有jQuery的mustache.js，但我不能让所有组件一起工作。找到每个文件，这里没有问题（模板加载了roght，我可以在Firebug调试器中看到它的值）。
这是我的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>
这是我的app.js文件：
$（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 ）;
}）;
}）;
jquery.mustache.js文件是从）
$（文件）.ready（function（）{
var template =... {{title}} ...;
var json = {title：titre article}
var article = $ .mustache（template，json）;
$（＃content）。append（article）;
}）;
但是，很容易从另一个文件中读取json：
$（document）.ready（function（）{
var template =... {{title}} ...;
$ .getJSON（'.. /js/article.json'，function（view）{
var article = $ .mustache（template，view）;
$（＃content）。append（article）;
}）;
}）;
您最后还可以从文件中读取模板：
$（document）.ready（function（）{
$ .getJSON（'../ js / article.json'，function（view）{
$ .get（。 ./templates/article.mustache，函数（模板）{
var article = $ .mustache（template，view）;
$（＃content）。append（article）;
}）;
}）;
}）;
工作示例（没有加载订单问题）：
$（document）.ready（function（）{
$ .getJSON（'../ js / article.json'，function（model）{return onJSON（model）;}）;
}）;
函数onJSON（model）{
$ .get（../ templates / article.mustache，function（view）{
var article = $ .mustache（view ，model）;
$（＃content）。append（article）;
}）;
}
取代 Mustache.to_html ，尝试 $。mustache 。在我看来，函数中定义了 Mustache 变量，所以它不能直接在它外面访问。
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);
});
}
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：什么是最小的工作示例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
