我想在我的 HTML5 应用程序中使用 mustache.js 和 jQuery，但我无法让所有组件协同工作。每个文件都找到了，这里没有问题(模板加载正确，我可以在 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 文件是从 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);
显示注意。 Firebug 告诉我
Mustache is not defined
查看截图:
我知道少了什么，但我说不出来是什么。
谢谢。
编辑: 最小 示例的正确和完整答案如下:
- 在脚本中编写模板，不要从文件中加载
- json 数据同上
- 阅读 jQuery 的生成方式并使用
$.mustache.to_html函数代替(在 github 上记录的)Mustache.to_html(感谢 @mikez302) - 重构直到放弃
$(document).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", function(template) {
var article = $.mustache(template, view);
$("#content").append(article);
});
});
});
工作示例(没有加载顺序问题):
$(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);
});
}
最佳答案
代替 Mustache.to_html，试试 $.mustache。在我看来，Mustache 变量是在函数内定义的，因此无法在函数外部直接访问。
关于javascript - mustache .js + jQuery : what is the minimal working example ?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6439935/