2014-12-25 129 views
1

我對Handlebars.js完全陌生,幾乎是JavaScript本身的新手。我在控制檯上看到這個錯誤「ReferenceError:Handlebars is not defined」。我已經試圖將這些引用歸類爲「x-handlebars-templates」,但它沒有幫助。ReferenceError:把手沒有定義

index.tmpl.php:

<html> 
 

 
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
 
<meta content="utf-8" http-equiv="encoding"> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 

 
<title>PHP and jquery</title> 
 
</head> 
 

 
<body> 
 
    
 
<div class="container"> 
 
    
 

 
<h1>Search films by title:</h1> 
 
<form id="film-selection" action="index.php" method="post"> 
 
\t 
 
\t <select name="q" id="q"> 
 
\t \t <?php 
 
      $alphabet = str_split('abcdefghijklmnopqrstuvwxyz'); 
 
      foreach ($alphabet as $letter) { 
 
      \t echo "<option value='$letter'>$letter</option>"; 
 
      } 
 
\t \t ?> 
 
\t </select> 
 
\t <button type="submit">Go!</button> 
 
</form> 
 

 
\t <?php if(isset($film)): ?> 
 
\t \t <ul class="film-list"> 
 
\t \t \t <?php 
 
\t \t  foreach ($film as $a) { 
 
\t \t   \t echo " <li data-film_id='{$a->film_id}'> 
 
\t \t   \t   <a href='film.php?film_id={$a->film_id}'>{$a->title} </a> 
 
\t \t   \t   </li>"; 
 
\t \t  } 
 
\t \t \t ?> 
 

 
\t \t </ul> 
 
\t <?php endif; ?> 
 

 

 

 
<script id="film_list_template" type="text/x-handlebares-templates"> 
 
\t {{#each this}} 
 
     <li data-film_id="{{film_id}}"> 
 
      <a href="film.php?film_id={{film_id}}">{{fulName this}}</a> 
 
     </li> 
 
    {{/each}} 
 

 
</script> 
 

 
    <script type="text/javascript" src="js/jquery.js"></script> 
 
    <script type="text/javascript" src="js/handlebars-v2.0.0.js"></script> 
 
    <script type="text/javascript" src="js/script.js"></script> 
 

 
</div> 
 

 
</body> 
 

 
</html>

的script.js:

var Film = { 
 
\t init: function(config){ 
 
\t \t this.config = config; 
 
\t \t this.setupTemplates(); 
 
\t \t this.bindEvents(); 
 

 
\t }, 
 

 
\t bindEvents: function(){ 
 
\t \t this.config.letterSection.on('change', this.fetchFilm); 
 

 
\t }, 
 

 
\t setupTemplates: function(){ 
 
     //The error is in this line below. 
 
     this.config.filmListTemplate = Handlebars.compile(this.config.filmListTemplate); //here is the error 
 
     Handlebars.registerHelper('fulName', function(film){ 
 
      return film.title; 
 
     }); 
 
\t }, 
 

 
\t fetchFilm: function(){ 
 
\t alert('Test2'); 
 
\t  
 
\t var self = Film; 
 
\t 
 
\t $.ajax({ 
 
\t \t url: 'index.php', 
 
\t \t type: 'POST', 
 
\t \t data: self.config.form.serialize(), 
 
\t \t dataType: 'json', 
 
\t \t success: function(results){ 
 
\t \t //console.log(results[0].title); 
 
\t \t self.config.filmList.append(self.config.filmListTemplate(results)); 
 

 
\t \t } 
 
\t }); 
 
\t } 
 
}; 
 

 
Film.init({ 
 
    letterSection: $('#q'), 
 
    form: $('#film-selection'), 
 
    filmListTemplate: $('#film_list_template').html(), 
 
    filmList: $('ul.film-list') 
 
});

+0

您是否嘗試將腳本引用複製到HTML文檔的頭部分?錯誤表示handlebar js文件未加載。這是eather,它根本沒有加載,或者在你嘗試使用一些車把功能的時候沒有加載。 – buhtla

+0

是的,我嘗試過。你是正確的沒有加載句柄腳本。我在網絡標籤中看到它沒有被加載。 –

+0

好,很高興我幫了忙。 – buhtla

回答

2

我發現我沒有文件」 handlebars- v2.0.0.js「在我的js目錄中。