Javascript Mustache.js + jQuery：最小的工作示例是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6439935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mustache.js + jQuery: what is the minimal working example ?
提问by Jean-Philippe Caruana
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).
我想在我的 HTML5 应用程序中使用 mustache.js 和 jQuery，但我无法让所有组件一起工作。每个文件都找到了，这里没有问题（模板加载正确，我可以在Firebug调试器中看到它的值）。
Here is my index.html :
这是我的 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 :
这是我的 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);
});
});
The jquery.mustache.js file is the one generated from https://github.com/janl/mustache.js:
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);
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 minimalexample 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
- 在脚本中编写模板，不要从文件中加载它
- 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);
});
But, it is easy to read the json from another file :
但是，从另一个文件中读取 json 很容易：
$(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);
});
}
采纳答案by Elias Zamaria
In place of Mustache.to_html, try $.mustache. It looks to me like the Mustachevariable is defined within the function, so it is not directly accessible outside of it.
代替Mustache.to_html，试试$.mustache。在我看来，该Mustache变量是在函数内定义的，因此不能在函数外部直接访问。
回答by Xoundboy
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.
我知道这个问题已经得到了回答，但是我写了一篇关于这个主题的博客文章，并认为我会在这里分享它，所以任何寻找如何在 jQuery 中使用 Mustache 的示例的人都可能会看到它。
