从外部html文件加载handlebars.js模板不显示任何内容 [英] loading handlebars.js template from external html file shows nothing
问题描述
我会尝试按顺序解释这一点，但这对我的js技能有一点延伸，所以我可以将它解释为一个白痴。
这里是我的JavaScript从服务器获取json，并尝试将其推入模板：
//服务器接口开始
//访问用户的web api：
var lucidServer =（function（）{
//全局错误处理程序
$（document）.ajaxError（function（event ，xhr）{
alert（xhr.status +：+ xhr.statusText）;
}）;
//客户端调用
var getClients = function（id）{
return $ .ajax（clientUrl +/ list /+ id）
;
var getClient = function（id）{
return $ .ajax（clientUrl +/详情/+ id）
};
//将它们推送到世界！
返回{
getClients：getClients，
getClient：getClient ，
};
}（））;
//服务器接口结束
（function（）{
//客户端列表
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正常工作，并返回我期待的Json数据。当我注意到templateInput时，它显示了我的期望。
以下是外部模板：
< script id =clientListtype =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>
我最终打算做的是将所有模板放在一个可以调用的html文件中通过脚本ID，或者让每个模板成为我可以调用的自己的文件。当我运行这个页面时，没有任何东西显示出来，没有任何错误或任何东西。这里是整个索引页面：
< ;! DOCTYPE html>
<！ - [if lt IE 7]> < html class =no-js lt-ie9 lt-ie8 lt-ie7>百分比抑制率ENDIF] - GT！;
<！ - [if IE 7]> < html class =no-js lt-ie9 lt-ie8>百分比抑制率ENDIF] - GT！;
<！ - [if IE 8]> < html class =no-js lt-ie9>百分比抑制率ENDIF] - GT！;
<！ - [如果gt IE 8]><！ - >
< html class =no-js>
<！ - <！[endif] - >
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>
< title>< / title>
< meta name =descriptioncontent =>
< meta name =viewportcontent =width = device-width/>
< link rel =stylesheethref =../../ Content / normalize.css>
< link rel =stylesheethref =../../ Content / main.css>
< script src =../../ scripts / libs / modernizr-2.6.2.min.js>< / script>
< / head>
< body>
<！ - [if lt IE 7]>
< p class =chromeframe>您正在使用< strong>过期的< / strong>浏览器。请< a href =http://browsehappy.com/>升级您的浏览器< / a>或< a href =http://www.google.com/chromeframe/?redirect=true>激活Google Chrome浏览器框架< / a>以改善您的体验。< / 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 / javascriptsrc =../../ 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 / javascriptsrc =../../ Scripts / serverInterface.js>< / script>
< / body>
< / html>
编辑：我改变了模板的外观。通过在chrome工具中调试js，它告诉我''data'在showallclients中的ajax成功行中是未定义的。
帮助！
您需要使用从getClient返回的数据调用模板。在你的例子中，showAllClients的参数被成功回调中的参数隐藏，因为你使用了相同的名字（数据）。将showAllClients中的参数名称更改为其他名称，并将其传递给模板函数。
（function（）{
//客户端列表
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（）;
}）;
}（））;
编辑：
需要在每个块中引用 this ：
< div ID = 客户端 >
{{#each client}}
< span data-id ={{this.id}}>
< div>
< p> {{this.iD}}< / p>
< p> {{this.name}}< / p>
...
< / div>
{{/ each}}
< / div>
在你的例子中，你使用了嵌套的迭代器，我不确定它是否受支持。请阅读如何使用嵌套迭代器与Mustache.js或Handlebars.js？或 Ember.js / Handlebars嵌套每次迭代都有不同的方法。
I am going to try to explain this in order, but this is a bit of a stretch on my js skills, so I could explain it like an idiot.
here is my javascript to get the json from the server, and try to push it into a template:
//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 insepect the templateInput it is showing what I expect.
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 it's own file that I can call. When I run this page nothing is showing up, no error or anything.. Here is the entire index page:
<!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.
Help!
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.
(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 this inside the each block:
<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 iterations for a different approach.
这篇关于从外部html文件加载handlebars.js模板不显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
