'undefined' is not a function (evaluating 'Backbone.$(window).on('hashchange', this.checkUrl)')

StackOverflow https://stackoverflow.com/questions/23175311

Question

I'm trying to configure Router with Backbone.js and receiving an exception at line 1414 of backbone.js 1.1.2

The error exists with Safari and Chrome:

[Error] TypeError: 'undefined' is not a function (evaluating 'Backbone.$(window).on('hashchange', this.checkUrl)')
start (backbone.js, line 1414)
(anonymous function) (index.html, line 27)

Here's the index.html file, line 27 is Backbone.History.start()

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
    </div>
    <script src="../jquery.js"></script>
    <script src="../underscore.js"></script>
    <script src="../backbone.js"></script>
    <script src="../json2.js"></script>

</body>

<!-- BACKBONE -->
<script type="text/javascript">
    (function($) {
        var PageRouter = Backbone.Router.extend({
            routes: {
                '': 'index'
            }
        });
        var pageRouter = new PageRouter();
        pageRouter.on('index', function() {
            console.log('hey');
        });
        Backbone.history.start();
    })(jQuery)
</script>
</html>

I can't find many resources to help out, and most of the pre-existing resources emphasize the allocation of the Router, and I feel it's implemented correctly. Also, I don't think it's necessary to have a Collection or Model since I'm only trying to implement routing at this time. Any help would be appreciated, thank you.

** EDIT **

I reordered the script imports to:

<script src="../underscore.js"></script>
<script src="../backbone.js"></script>
<script src="../jquery.js"></script>
<script src="../json2.js"></script>

and the error changed to TypeError: 'undefined' is not a function (evaluating 'Backbone.$(window)')

adding the breakpoint to line 1414 of backbone.js indicates the error is from evaluating this.checkUrl

checkUrl: function () { [native code] }
arguments: (...)
get arguments: function ThrowTypeError() { [native code] }
set arguments: function ThrowTypeError() { [native code] }
caller: (...)
get caller: function ThrowTypeError() { [native code] }
set caller: function ThrowTypeError() { [native code] }
length: 1
name: ""
__proto__: function Empty() {}
[[TargetFunction]]: function (e) {
[[BoundThis]]: Backbone.History
[[BoundArgs]]: Array[0]

the way I set up the router is de facto according to multiple sources, irrespective of the (function($){})(jQuery) and dunno how to get the path to be assigned correctly. using # did not help me.

Was it helpful?

Solution

I notice two things in your code:

  1. The routes object is supposed to map route patterns to method names (or anonymous functions):

    The routes hash maps URLs with parameters to functions on your router (or just direct function definitions, if you prefer)

    but you don't have an index method defined in PageRouter.

  2. If you look at the route docs (or the Catalogue of Events), you will see that:

    The name argument will be triggered as a "route:name" event whenever the route is matched.

    So your router will trigger 'route:index' events, not 'index' events.

I can't reproduce the error you're seeing but if I address both of those points, things seem to be working as expected:

var PageRouter = Backbone.Router.extend({
    routes: {
        '': 'index'
    },
    index: function() {
        console.log('index');
    }
});
var pageRouter = new PageRouter();
pageRouter.on('route:index', function () {
    console.log('hey');
});
Backbone.history.start();

Demo: http://jsfiddle.net/ambiguous/kt7L8/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top