1
저는 Handlebars.js를 처음 접했고 JavaScript 자체가 거의 새로운 것 같습니다. 콘솔에서이 오류가 발생합니다. "ReferenceError : 핸들 막대가 정의되지 않았습니다." 나는 이미 "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 문서의 head 섹션에 스크립트 참조를 복사하려고 시도 했습니까? 오류는 핸들 바 js 파일이로드되지 않았 음을 나타냅니다. 그것은 전혀로드되지 않았거나 일부 핸들 바 기능을 사용하려고 할 때로드되지 않습니다. – buhtla
예. 시도했습니다. 당신은 바로 핸들 바 스크립트가로드되지 않습니다. 네트워크 탭에서로드되지 않은 것을 보았습니다. –
기쁜 마음으로 도와 줬습니다. – buhtla