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.