Uncaught TypeError: Expecting a function in instanceof check

Josh V picture Josh V · Jun 26, 2013 · Viewed 7.1k times · Source

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> &#169; 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.

Answer

Andrew picture Andrew · Jun 26, 2013

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",
 },