Question

Am building a single page site with backbone.js. Am using require.js to make the code modular,
but am having problems initializing the backbone router for urls.
I load the main js file using require.js, heres what it looks like

enter code here
//App Namespace
var Chrono = Chrono || {};
//App Config Namespace
Chrono.Config = Chrono.Config || {};
//App Views Namespace
Chrono.Views = Chrono.Views || {};

//Config
Chrono.Config = {
    url:"http://localhost/chronotech/",
    site_url:"http://localhost/chronotech/index.php/",
    data_source:"http://localhost/chronotech/assets/datasource/"
};

require.config({
    paths : {
        'backbone': 'libs/backbone',
        'jquery':'libs/jquery.min',
        'underscore':'libs/underscore',
        'text':'libs/require/text'
    },
    baseUrl : 'assets/js'
});

require(
    ['require', 'underscore', 'backbone', 'jquery'],
    function(require,_, Backbone, $) {
        require(['app'],
            function(require) {
        } );
    } );

And the app.js looks like this

define(['backbone','routers/workspace'],
    function( Backbone,Workspace) {
        $(function () {
            var space = new Workspace();
        } );
    } );

And router file looks like this

define(['jquery','backbone'],
    function($, Backbone) {

        var Workspace = Backbone.Router.extend( {
            routes: {
                "about":"aboutPage",
                "team":"teamPage",
                "contact":"contactPage",
                "work":"portfolioPage",
                "products":"productPage"
            },
            aboutPage : function() {
                alert("about");
            },

            teamPage : function() {
                alert("team");
            },

            contactPage: function() {
                alert("contact");
            },

            portfolioPage : function() {
                alert("work");
            },

            productPage : function() {

            }
        } );

        return Workspace;
    } );

When i load the page, i get the following errors:
“Uncaught ReferenceError: $ is not defined”,
“Uncaught TypeError: Cannot read property ‘Router’ of null”.
What am i doing wrong?

Answer 1

define(['backbone','routers/workspace'],
    function( Backbone,Workspace) {
        $(function () {
            var space = new Workspace();
        } );
    } );

Is it a separate file? Maybe you need to load jQuery in order to use $?