I am currently learning how to program in Backbone.JS and I keep on running into the follow error:
Uncaught ReferenceError: homePage is not defined
Uncaught ReferenceError: homePage is not defined app.js:30 Backbone.Router.extend.displayHome app.js:30 (anonymous function) backbone-min.js:1 (anonymous function) 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.handle
I am using Node.JS to power the server, Handlebars as the template, JQuery, and others you will see in the HTML. The error seems to be coming from the initialize function in the app.js file. If I uncomment the
//var homePage = new HomePage({name: 'J***, address: 'JC'});
It renders perfectly.
It may be a small error that I may have overseen or something in the libraries it self. I'm still new to this. Any help will be appreciated.
The following: HTML Code:
<!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 file
/*
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();
});
And last the index.js (where the HomePage view is located)
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;
}
});
Again, thank you.
new
on a function – Sushanth -- Aug 13 '13 at 1:49this.homePage
inrender
? You are creatingthis.homePage
in yourinitialize
after all. – mu is too short Aug 13 '13 at 2:21