2014-12-25 98 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目录中。