Uncaught ReferenceError：車把未定義

嗨，看到有另一個帖子標題爲「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/Uncaught ReferenceError：車把未定義

來源

2015-04-17 user3709389

請不要參考外部資源。而不是在這裏發佈你的代碼 – niyou

你正在調用handlebars之前它正在加載。將你的編譯句柄的腳本移動到如下所示的正文。

<!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 $1.</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>

來源

2015-04-17 09:37:45

因爲你使用的是jQuery，你也可以聽jQuery的準備 –

我做到了，但我仍然得到相同的錯誤 – user3709389

你在檢查你的小提琴鏈接？ –

Uncaught ReferenceError：車把未定義

回答

相關問題