I'm experimenting around with Backbone.js and am simply trying to get the messages to pop up on my console screen. How ever, every time I do so an error keeps on appearing (noted below)
Uncaught TypeError: Expecting a function in instanceof check, but got [object Object] backbone.js:1032
_.extend.setElement backbone.js:1032
_.extend._ensureElement backbone.js:1104
Backbone.View backbone.js:986
child backbone.js:1531
(anonymous function) pageLoader.js:19
(anonymous function)
Here is the JavaScript file
(function ($){
window.PageLoader = Backbone.View.extend({
el: $("section"),
events: {
"": "initialization",
"click #aboutUs" : "aboutUs",
},
initialization: function(){
console.log('pageLoader.js initialized\nHome page rendered');
},
aboutUs:function(){
console.log('About us page rendered.');
}
});
var pageLoader = new PageLoader();
//pageLoader.initialization();
//pageLoader.aboutUs();
})(jQuery);
Also here is the HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta />
<meta />
<title>Bus tours and tows</title>
</head>
<body>
<div id="centerWrapper">
<header>
<h1>So and so Bus tours and tows</h1>
<header/>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="#aboutUs">About us</a></li>
<li><a href="">Tours</a></li>
<li><a href="">Tows</a></li>
<li><a href="">Schedule</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<section></section>
<footer> © Of So and so bus tours and tows. <br />
<i>Questions regarding the construction of the website, please email</i>
<a href="mailto: [email protected]">Web Master</a>
</footer>
<div id="jsFilesAndDepend">
<!-- -->
<!-- Filese that are dependant-->
<script src="js/dependencies/underscore.js"></script>
<script src="js/dependencies/backbone.js"></script>
<script src="js/dependencies/jquery-1.10.1.js"></script>
<script src="js/pageLoader.js"></script>
<script src=""></script>
<script src=""></script>
</div>
</div>
</body>
</html>
I am new to Backbone.JS. Thank you for helping.
You need to load jQuery before backbone,
<script src="js/dependencies/underscore.js"></script>
<script src="js/dependencies/jquery-1.10.1.js"></script>
<script src="js/dependencies/backbone.js"></script>
You also cannot define empty event key value pairs,
events: {
// "": "initialization", <- this is invalid.
"click #aboutUs" : "aboutUs",
},