Question

I’ve been trying to practice on backbone.js, I found one tutorial online which I was trying to follow (http://backbonetutorials.com/what-is-a-router/) but unfortunately i have problem reaching to my view through the router.

Below is my code

main.js

requirejs.config({
    // create local alias for package
    paths: {
        l           :   'my/vehicle',
        underscore  :   'vendors/underscore',
        jqueryui    :   'vendors/jquery-ui/js/jquery-ui-1.9.0.custom.min',
        backbone    :   'vendors/backbone',
        bootstrap   :   'vendors/bootstrap'

    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },

        underscore: {
            exports: "_"
        }
    }

})


require(['../../config'], function(core){

    require(["l/app"], function(App) {

        'use strict';
        App.initialize();

    });

});

app.js

define(["jquery", "backbone", "l/router"], function($, Backbone, Router) {

    var initialize = function(){
        // Pass in our Router module and call it's initialize function

        Router.initialize();

    }

    return {
        initialize: initialize
    };
});

router.js

define([
    'jquery',
    'underscore',
    'backbone',
    'l/views/BrowseVehicle'
], function($, _, Backbone, BrowseVehicleView){

    var AppRouter = Backbone.Router.extend({
        routes: {
            // Define some URL routes
            '/browse' : 'showVehicleBrowse',

            // Default
            '*actions'  : 'defaultAction'
        }
    });

    var initialize = function(){
        var app_router = new AppRouter;
        app_router.on('showVehicleBrowse', function(){
            // Call render on the module we loaded in via the dependency array
            console.log('am here');
            var BrowseVehicleView = new BrowseVehicleView();
            BrowseVehicleView.render();
        });

        app_router.on('defaultAction', function(actions){
            // We have no matching route, lets just log what the URL was

            console.log('No route:', actions);
        });

        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

views/BrowseVehicle.js

define([
    'jquery',
    'underscore',
    'backbone'
], function($, _, Backbone){
    var BrowseVehicleView = Backbone.View.extend({
        el: $('#vehicle-browse-form'),
        render: function(){
            // Using Underscore we can compile our template with data
            console.log('I reached vehicle browse form');
        }
    });
    // Our module now returns our view
    return BrowseVehicleView;
});

There is no error on loading the code, console.log is not printing anything in the view nor in the router inside the routed function. I tried to access my urls using URL/#/browse but not getting the console.log statement.

Can anyone please advise?

Answer 1

In the routes {} definition remove the forward slash in front of browse.