javascript 未捕获的 ReferenceError：车把未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29695551/
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
Uncaught ReferenceError: handlebars is not defined
提问by user3709389
Hi saw that there was another post with same title "ReferenceError: Handlebars is not defined" as this but the problem does not look to be the same. I'm trying to build a single page app but i keep getting the "Uncaught ReferenceError: handlebars is not defined" error in the console. The network tab on the console looks to show that the handlebars.min.js is being load. Here http://goo.gl/otKn2zis a JSfiddle if you want to view the code or you can view it live at http://angus.2pm-chips.io/spa/
您好，看到有另一篇具有相同标题的帖子“ ReferenceError: Handlebars is not defined”，但问题看起来并不相同。我正在尝试构建一个单页应用程序，但我一直在控制台中收到“Uncaught ReferenceError：handlebars is not defined”错误。控制台上的网络选项卡显示正在加载 handlebars.min.js。这里http://goo.gl/otKn2z是一个 JSfiddle 如果你想查看代码或者你可以在http://angus.2pm-chips.io/spa/实时查看它
回答by Vigneswaran Marimuthu
You are invoking handlebars before it is getting loaded. Move your script that compiles handlebars to body like below.
您正在加载车把之前调用它。将您编译把手的脚本移动到如下所示的主体。
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/bin/materialize.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<script type="text/x-handlebars-template" id="main-template">
<h1>Loaded main template</h1>
</script>
<button class="clear-screen">Click Me</button>
<nav>
<div class="nav-wrapper" id="nav-color">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<ul class="side-nav" id="mobile-demo">
<li><a href="#!"><i class="mdi-action-home left"></i>Home</a></li>
<li><a href="#"><i class="mdi-content-add left"></i>Add Card</a></li>
<li><a href="#"><i class="mdi-navigation-close left"></i>Remove Card</a></li>
<li><a href="#"><i class="mdi-action-stars left"></i>Get Premium</a></li>
<li><a href="#"><i class="mdi-action-settings left"></i>Settings</a></li>
</ul>
</div>
</nav>
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="flybuys"><span id="flybuys-text">FlyBuys</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="airpoints"><span id="airpoints-text">Airpoints</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="onecard"><span id="airpoints-text">OneCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="summitclub"><span id="summit-text">Kathmandu Summit Club</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="clubcard"><span id="new-world-text">New World ClubCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
</ul>
<!-- Modal Trigger -->
<a id="btn-color" class="waves-effect waves-light btn modal-trigger" href="#modal1">Add More</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Get Premium</h4>
<p>To have more than 5 card you need Premium, this gives you the ability to have unlimited card! Get it now for only .</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Not now</a>
<a href="https://play.google.com/store" class="modal-action modal-close waves-effect waves-green btn-flat ">Get Premium </a>
</div>
</div>
<div class="content">
init content
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js">
</script>
<script type="text/javascript" src="bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="bower_components/materialize/bin/materialize.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var template = handlebars.compile( $('#main-template').html() );
$(document).on('click','.clear-screen', function(){
$('.content').html( template() );
});
</script>
</body>
</html>
