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