javascript 从外部 html 文件加载 handlebars.js 模板不显示任何内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13075132/
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
Loading handlebars.js template from external html file shows nothing
提问by ledgeJumper
This question is a bit of a stretch of my JS skills, so I might explain it like an idiot.
这个问题有点牵强我的JS技能，所以我可能会像白痴一样解释它。
Here is my JavaScript to get the json from the server, and try to push it into a template:
这是我的 JavaScript，用于从服务器获取 json，并尝试将其推送到模板中：
//Server Interface Start
//Access the web api for The User:
var lucidServer = (function () {
//global error handler
$(document).ajaxError(function (event, xhr) {
alert(xhr.status + " : " + xhr.statusText);
});
//client Calls
var getClients = function (id) {
return $.ajax(clientUrl + "/list/" + id)
};
var getClient = function (id) {
return $.ajax(clientUrl + "/details/" + id)
};
//push them out to the world!
return {
getClients: getClients,
getClient: getClient,
};
}());
//Server Interface End
(function () {
//list of clients
var refreshClients = function () {
lucidServer.getClients(1).done(showAllClients);
};
var showAllClients = function (templateInput) {
var source;
var template;
var path = '../Templates/indexTemplates.html'
$.ajax({
url: path,
cache: true,
success: function (data) {
source = data;
template = Handlebars.compile(source);
$('#clientListOutput').html(template(templateInput));
}
});
};
$(function () {
refreshClients();
});
}());
GetClients works fine and returns the Json data I am expecting. When I inspect the templateInput it is showing what I expect.
GetClients 工作正常并返回我期望的 Json 数据。当我检查 templateInput 时，它显示了我的期望。
Here is the external template:
这是外部模板：
<script id="clientList" type="text/html">
<div id="clients">
{{#each client}}
<span data-id="{{this.iD}}" />
<div>
<p>{{this.iD}}</p>
<p>{{this.name}}</p>
</div>
{{/each}}
</div>
</script>
What I am ultimately aiming to do is hold either all my templates in one html file that I can call by script id, or have each template be its own file that I can call. When I run this page nothing is showing up, there's no error or anything. Here is the entire index page:
我最终的目标是将我的所有模板保存在一个我可以通过脚本 ID 调用的 html 文件中，或者让每个模板成为我可以调用的自己的文件。当我运行此页面时，没有任何显示，也没有错误或任何内容。这是整个索引页面：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../Content/normalize.css">
<link rel="stylesheet" href="../../Content/main.css">
<script src="../../scripts/libs/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<section id="Application">
<div id="clientListOutput">
</div>
<div id="clientCreateOutput">
</div>
</section>
<footer>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../scripts/libs/jquery-1.8.2.min.js"><\/script>')</script>
<script src="../../scripts/plugins.js"></script>
<script src="../../scripts/main.js"></script>
<script type="text/javascript" src="../../Scripts/libs/handlebars.js"></script>
<script>
var freelancerUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Freelancer"})';
var clientUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Client"})';
var projectUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Project"})';
var storyUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Story"})';
</script>
<script type="text/javascript" src="../../Scripts/serverInterface.js"></script>
</body>
</html>
Edit
编辑
I changes the way my template looks slightly. Through debugging the js in Chrome tools it is telling me that 'data' is undefined in the ajax success line within showallclients.
我稍微改变了我的模板的外观。通过在 Chrome 工具中调试 js，它告诉我在 showallclients 中的 ajax 成功行中未定义“数据”。
回答by ebaxt
You need to call template with the data returned from getClient. In you example the argument to showAllClients is shadowed by the argument in the success callback because you use the same name (data). Change the argument name in showAllClients to something else, and pass it to the template function.
您需要使用从 getClient 返回的数据调用模板。在您的示例中， showAllClients 的参数被成功回调中的参数隐藏，因为您使用相同的名称（数据）。将 showAllClients 中的参数名称更改为其他名称，并将其传递给模板函数。
(function () {
//list of clients
var refreshClients = function () {
$.when(lucidServer.getClients(1)).done(showAllClients);
};
var showAllClients = function (templateInput) {
var source;
var template;
var path = 'Templates/indexTemplates.html'
$.ajax({
url: path,
cache: true,
success: function (data) {
source = data;
template = Handlebars.compile(source);
$('#clientListOutput').html(template(templateInput));
}
});
};
$(function () {
refreshClients();
});
}());
EDIT:
编辑：
In the template you need to refer to thisinside the each block:
在模板中，您需要this在每个块中引用：
<div id="clients">
{{#each client}}
<span data-id="{{this.id}}">
<div>
<p>{{this.iD}}</p>
<p>{{this.name}}</p>
...
</div>
{{/each}}
</div>
In your example you use nested iterators, which I'm not sure is supported. Please read How do I use nested iterators with Mustache.js or Handlebars.js?or Ember.js / Handlebars nested each iterationsfor a different approach.
在您的示例中，您使用嵌套迭代器，我不确定是否支持。请阅读如何在 Mustache.js 或 Handlebars.js 中使用嵌套迭代器？或Ember.js / Handlebars为不同的方法嵌套每个迭代。
