我刚刚开始了解 Handlebars.JS，我发现它是一个非常强大的工具。
我希望能够使用外部加载的模板和外部加载的 JSON 来保持我的代码干净，并减少跨页面的重复。
此刻我只能让一个或另一个工作，我可以用本地 JSON 数据加载外部模板，或者用本地模板加载外部 JSON 文件。但是，我想两者都做!
我在 handlebars 文档中看不到任何涉及外部 JSON 或外部模板的内容。
这是我到目前为止最接近的......
我的javascript...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Please work!</title>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
</head>
<body>
<div id="anchor">My stuff should appear here</div>
<script>
var jsonData;
function user_tracker(){
$.getJSON("data/JSON_test.php", function(data) {
jsonData = JSON.stringify(data);
});
$.ajax({
url: 'data/templates/test.php',
cache: true,
success: function(data) {
source = data;
template = Handlebars.compile(source);
$('#anchor').html(template(jsonData));
}
});
}
$(document).ready(function($) {
user_tracker();
});
</script>
</body>
</html>
这是我的 JSON 文件...
{ "people":
[
{
"family": "Lopez",
"name": "Hugo",
"title": "leader",
"place": "Paris (France)",
"introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener",
"photo": "WikiAtlas_Lopez_Hugo_Yug.png",
"twitter": "http://www.twitter.com/Hugo_lz"
},
{
"family": "Ganesh",
"name": "Arun",
"title": "co-leader",
"place": "Dharamsala (India)",
"introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker",
"photo": "WikiAtlas_Ganesh_Arun_Planemad.jpg",
"twitter": "http://www.twitter.com/planemad"
},
{
"family": "Lopez",
"name": "Edouard",
"title": "Hero",
"place": "Bordeaux (France)",
"introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
"photo": "WikiAtlas_Lopez_Edouard_Lyhana8.png",
"twitter": "http://wwww.twitter.com/edouard_lopez"
}
]
}
这是我的模板文件....
<div>
Hey! I've loaded!
{{#people}}
<div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
{{/people}}
</div>
模板加载正常，但 JSON 似乎没有。我在控制台中完全没有收到任何错误。
我添加了 JSON.stringify，因为我之前收到一个错误，提示 Handlebars 不喜欢传递给它的对象。
最佳答案
我找不到重复问题，但这是 JS 中非常常见的问题，并且与异步执行的性质有关。
基本上，假设您需要做午餐；你决定让你的两个 child 帮忙。所以你告诉乔伊跑到商店去买更多的土 bean (因为你家里没有土 bean 了)，然后你告诉小珍从抽屉里拿刀给你(因为她当然不会割伤自己，她已经四岁了!)。你决定在 Jen 完成任务后立即开始切菜；但是因为乔伊还没有回来，所以你很快就把菜砍完了。然后，你的妻子提示土 bean 汤里没有真正的土 bean 。乔伊终于回家了，错过了(一顿非常平淡的)晚餐。如果您等两个 child ，所有这些都可以避免。
您的 jsonData 是您的土 bean ，您无需等待的差事。您的模板是 Jen 的刀，您可以立即执行模板编译任务。
对此有两个半的解决方案。
不太好，但很容易:只有当乔伊回来时才派 Jen 去拿刀(反之亦然):
$.getJSON("data/JSON_test.php", function(jsonData) { $.ajax({ url: 'data/templates/test.php', cache: true, success: function(source) { var template = Handlebars.compile(source); $('#anchor').html(template(jsonData)); } }); });真实的事情:在你开始做饭之前计算你所有的 child 都在场:
var ajaxDone = 0; var jsonData, template; function runTemplate() { $('#anchor').html(template(jsonData)); } $.getJSON("data/JSON_test.php", function(data) { jsonData = data; if (++ajaxDone == 2) runTemplate(); }); $.ajax({ url: 'data/templates/test.php', cache: true, success: function(data) { var source = data; template = Handlebars.compile(source); if (++ajaxDone == 2) runTemplate(); } });使用 promises，它会为您计数。
$.when( $.getJSON("data/JSON_test.php"), $.ajax({ url: 'data/templates/test.php', cache: true, }) ).then(function(responseJSON, responseTemplate) { // ... });(我不知道
responseJSON和responseTemplate格式最终会变成什么，可能类似于[data, statusText, jqXHR ]... 所以，console.log他们，自己看看土 bean 在哪里，刀在哪里。)
编辑:我是在盲目地复制粘贴，但是，是的，你不能在这里 JSON.stringify。让我快速剥离它。
关于javascript - 外部 JSON 和外部模板 - 无法同时工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33034751/