javascript - Backbone.JS Error: "Uncaught ReferenceError: homePage is not defined" -
i learning how program in backbone.js , keep on running follow error:
uncaught referenceerror: homepage not defined
uncaught referenceerror: homepage 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 using node.js power server, handlebars template, jquery, , others see in html. error seems coming initialize function in app.js file. if uncomment
//var homepage = new homepage({name: 'j***, address: 'jc'}); it renders perfectly.
it may small error may have overseen or in libraries self. i'm still new this. 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 have stumbed upon page, have found new website personal website. site node, bakcbone, bootstrap, jquery, modinzer, html5, css3 , 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 url function "": "displayhome", "me" : "displayme", "resume" : "displayresume", "projects" : "displayprojects", "contact" : "displaycontactform" //note colons ':' after url 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 best pick 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 index.js (where homepage view located)
var homepage = backbone.view.extend({ template: handlebars.compile( '<article class="col-lg-9">'+ '<h1>web development @ current state ... me</h1>'+ '<p>this website, prototype not care user design until make mark or ui design website. purely experminetal , not expect 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 compile variables return this; } }); again, thank you.
Comments
Post a Comment