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')
});
您是否嘗試將腳本引用複製到HTML文檔的頭部分?錯誤表示handlebar js文件未加載。這是eather,它根本沒有加載,或者在你嘗試使用一些車把功能的時候沒有加載。 – buhtla
是的,我嘗試過。你是正確的沒有加載句柄腳本。我在網絡標籤中看到它沒有被加載。 –
好,很高興我幫了忙。 – buhtla