現在、Backbone.JS でプログラミングする方法を学んでいますが、次のエラーが発生し続けています。
Uncaught ReferenceError: homePage が定義されていません
Uncaught ReferenceError: homePage is not defined app.js:30 Backbone.Router.extend.displayHome app.js:30 (匿名関数) backbone-min.js:1 (匿名関数) backbone-min.js:1 j.some. j.any underscore-min.js:5 h.extend.loadUrl backbone-min.js:1 h.extend.checkUrl backbone-min.js:1 x.event.dispatch jquery-1.10.2.min.js:5 v.ハンドル
Node.JS を使用してサーバーを動かし、Handlebars をテンプレートとして、JQuery などを HTML に表示します。app.js ファイルの初期化関数からエラーが発生しているようです。コメントを外すと
//var homePage = new HomePage({name: 'J***, address: 'JC'});
それは完璧にレンダリングされます。
私が見落とした小さなエラーか、それ自体がライブラリ内の何かである可能性があります。私はまだこれに慣れていません。どんな助けでも大歓迎です。
以下: HTML コード:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Pages || JayVee Protype</title>
<!--CSS Libs-->
<link rel="stylesheet" type="text/css" href="css/lib/bootstrap.min.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<a href="#" class="navbar-brand">JayVee</a>
<ul class="nav navbar-nav">
<li><a href="#/me">Me</a></li>
<li><a href="#/resume">Resume</a></li>
<li><a href="#/projects">Projects</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</nav>
<header class="jumbotron">
<h1>Prototype of JayVee v3</h1>
<p>If you have stumbed upon this page, then you have found my new website for my personal website. This site will be up with Node, Bakcbone, Bootstrap, Jquery, Modinzer, HTML5, CSS3 and more.</p>
</header>
<section id="displayZone" class="row">
</section>
<footer>
</footer>
</div>
<!--Lib scripts-->
<script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lib/handlebars.js"></script>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
<script type="text/javascript" src="js/lib/backbone-min.js"></script>
<script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="js/lib/modernizr.js"></script>
<!--BB scripts-->
<script type="text/javascript" src="js/views/index.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
App.JS ファイル
/*
Main JS app running Backbone
*/
var AppRouter = Backbone.Router.extend({ //Prevents Server Requests
routes: {//Will match the url to the function
"": "displayHome",
"me" : "displayMe",
"resume" : "displayResume",
"projects" : "displayProjects",
"contact" : "displayContactForm"
//note colons ':' after url are variables
},
//Initializes when brought upon
initialize: function (){
this.homePage = new HomePage (
{
name: 'Joshua John Villahermosa',
address: 'JC'
}
);
console.log('App loaded...')
},
//Defined functions
displayHome: function (){
//var homePage = new HomePage({name: 'J***, address: 'JC'});
$('#displayZone').html(homePage.render().el);
//Note JQuery is best to pick up Id's
},
displayMe: function (){
$('#displayZone').html('<p>Me page loaded</p>')
},
displayResume: function (){
$('#displayZone').html('<p>Resume page loaded</p>')
},
displayProjects: function (){
$('#displayZone').html('<p>Projects page loaded</p>')
},
displayContactForm: function (){
$('#displayZone').html('<p>Form page loaded</p>')
},
});
//Instatiate app
var app = new AppRouter();
$(function(){
Backbone.history.start();
});
そして最後に index.js (HomePage ビューがある場所)
var HomePage = Backbone.View.extend({
template: Handlebars.compile(
'<article class="col-lg-9">'+
'<h1>Web development at its current state ... for me</h1>'+
'<p>This is my website, as this is a prototype I currently do not care about user design until I make the mark up or UI design for the website. This is purely experminetal and do not expect a lot of information</p>'+
'</article>'+
'<aside class="col-lg-3">'+
'<h2>Contact</h2>'+
'<address>'+
'{{name}}<br>'+
'Email: <a href="mailto: ***.**@*.com">***.**@*.com</a> <br>'+
'Address: {{address}}'+
'</address>'+
'</aside>'
),
render: function (){
this.$el.html(this.template(this.options));//this.options will compile variables
return this;
}
});
再びありがとう。