Fatal编程技术网
  • javascript/
  • Javascript Mustache.js+；jQuery：最简单的工作示例是什么？

Javascript Mustache.js+；jQuery：最简单的工作示例是什么？

javascript jquery html

Javascript Mustache.js+；jQuery：最简单的工作示例是什么？,javascript,jquery,html,mustache,Javascript,Jquery,Html,Mustache,我想在我的HTML5应用程序中使用mustache.js和jQuery，但我不能让所有组件一起工作。每个文件都被找到了，这里没有问题（模板是roght加载的，我可以在Firebug调试程序中看到它的值） 这是我的index.html： <!DOCTYPE html> <html lang="fr"> <head><meta charset="utf-8"></head> <body> <

我想在我的HTML5应用程序中使用mustache.js和jQuery，但我不能让所有组件一起工作。每个文件都被找到了，这里没有问题（模板是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>
jquery.mustache.js文件是由以下内容生成的：

但是，从另一个文件读取json很容易：

$(document).ready(function() { var template = " ... {{title}} ... "; $.getJSON('../js/article.json', function(view) { var article = $.mustache(template, view); $("#content").append(article); }); }); $（文档）.ready（函数（）{ var template=“…{{title}}…”； $.getJSON（'../js/article.json'，函数（视图）{ var article=$.mustache（模板，视图）； $（“#内容”）。附加（文章）； }); }); 最后，您还可以从文件中读取模板：

$(document).ready(function() { $.getJSON('../js/article.json', function(view) { $.get("../templates/article.mustache", function(template) { var article = $.mustache(template, view); $("#content").append(article); }); }); }); $（文档）.ready（函数（）{ $.getJSON（'../js/article.json'，函数（视图）{ $.get（“../templates/article.mustache”，函数（模板）{ var article=$.mustache（模板，视图）； $（“#内容”）。附加（文章）； }); }); }); 工作示例（无加载顺序问题）：

$（文档）.ready（函数（）{ $.getJSON（'../js/article.json'，函数（模型）{returnonJSON（模型）；}）； }); 函数onJSON（模型）{ $.get（“../templates/article.mustache”，函数（视图）{ var article=$.mustache（视图、模型）； $（“#内容”）。附加（文章）； }); }
代替
小胡子。要使用html
，请尝试
$.Mustache
。在我看来，
Mustache
变量是在函数中定义的，因此在函数之外无法直接访问。

我知道这个问题已经得到了回答，然而，我写了一篇关于这个主题的博客文章，并认为我会在这里分享它，所以任何想在jQuery中使用Mustach的人都会看到它

我会将所有JavaScript放在内容后面。谢谢你的提示。我现在不是在寻找优化，我想让我的代码正常工作。我把它作为评论而不是答案发布。当然，加载脚本的顺序还包括使代码正常工作的问题。如果您是JavaScript的初学者，则此信息是一个关键的“必读”信息。所有初学者都知道在加载jQueryUI或任何其他jQuery插件之前需要加载jQuery吗？@Sparky672对我来说，在加载任何其他jQuery相关插件之前加载jQuery是有意义的。感谢几年后的提示，这可能是意料之中的，但我想让你知道你的博客链接已断开。@谢谢提醒，我只是读了你的评论，很抱歉耽搁了。不管怎样，它现在已经恢复了：） $(document).ready(function() { var template = " ... {{title}} ... "; var json = {title: "titre article" } var article = $.mustache(template, json); $("#content").append(article); }); $(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); }); }