backbone navigate not listened by the routers, but onload it works

Question

I am developing a application using requirejs and backbone, in the index view (index page) i am getting 2 difficulties...

when i use the navigate function like this:

this.navigate("dashBoard/");

it's not works, in case if i use:

Backbone.history.navigate("dashBoard/");

it's working fine. even though in my "routes" i am not getting the function triggered. here is my index view..

define(["singleton","backbone"],function (obj,Backbone) {

    window.EDMS = obj || {};

    EDMS.index = Backbone.View.extend({
        el:$(".loginPage > section"),
        events:{
            "click #loginBtn" : "enter"
        },
        initialize:function(){
            this.$el.html(this.template());
        },
        enter:function(e){
            e.preventDefault();
            var userName = $.trim(this.$el.find("#userName").val()),
                password = $.trim(this.$el.find("#password").val());

            if(userName && password){
                Backbone.history.navigate("dashBoard/"); //only this is works
                     //this.navigate("dashBoard/") not working.
            }else{
                return false;
            }
        }
    });

    return EDMS.index;
})

But in case of console of "EDMS.routers" - i am getting the methods... how to sync my index view to routers properly.. any help?

my routers.js

define(["singleton","backbone","utils"], function (EDMS,Backbone,utils) {

    window.EDMS = window.EDMS || {};

    EDMS.routers = Backbone.Router.extend({
        routes:{
            "":"caller",
            "dashBoard/":"dashBoard"
        },
        initialize:function(){
            utils(["index"]);

        },
        caller:function(){
            console.log("i am called");
        },
        dashBoard:function(){
            console.log("welcome to dashBoard");
        }
    });

    return EDMS.routers;

})

my app initializing on require.js

require(["jquery","underscore","backbone","singleton","routers"],function ($,_,Backbone,EDMS,routers) {
    EDMS.router = new EDMS.routers();
    Backbone.history.start();
});

do you have any code for initializing the router, like `EDMS.router = new EDMS.routers();` anywhere in your code ( it should be in the DOM ready method ) — drinchev, May 11 '13 at 08:54
while on require.js initialization it self i do that. updated my initializing part of code. thanks — 3gwebtrain, May 11 '13 at 09:00
Then you should use your initialized router, like `EDMS.router.navigate(...` — drinchev, May 11 '13 at 09:01
Also, why do you fill your global object with EDMS when you use requirejs? — drinchev, May 11 '13 at 09:02
i use the singleton method. if you wish to see all my codes, let me give you.. — 3gwebtrain, May 11 '13 at 09:03
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29768/discussion-between-3gwebtrain-and-drinchev) — 3gwebtrain, May 11 '13 at 09:07

drinchev · Accepted Answer · 2013-05-11T09:31:29.287

Using requirejs gives you the ability to separate your modules ( as you may already know ). The proper way to do that is by accessing the separated modules by require.

Of course you should have something like this in your app :

require.config({
  paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone'
  }
});

Your router is initialized in the final app initalization and basically the code should look something like this :

define('routers', ["backbone","utils"], function (Backbone,utils) {

    var routers = Backbone.Router.extend({
        routes:{
            "":"caller",
            "dashBoard/":"dashBoard"
        },
        initialize:function(){
            utils(["index"]);

        },
        caller:function(){
            console.log("i am called");
        },
        dashBoard:function(){
            console.log("welcome to dashBoard");
        }
    });

    return new routers();

});

In your View :

define('indexView', ["routers","backbone"],function (router,Backbone) {

    var index = Backbone.View.extend({
        el:$(".loginPage > section"),
        events:{
            "click #loginBtn" : "enter"
        },
        initialize:function(){
            this.$el.html(this.template());
        },
        enter:function(e){
            e.preventDefault();
            var userName = $.trim(this.$el.find("#userName").val()),
                password = $.trim(this.$el.find("#password").val());

            if(userName && password){
                router.navigate("dashBoard/");
            }else{
                return false;
            }
        }
    });

    return index;
});

And in your Initialization

require(["jquery","underscore","backbone","indexView","routers"],function ($,_,Backbone,indexView,routers) {
    window.App = { indexView: new indexView() };
});

By doing this you'll popup an event in the router, to which you could listen from any of your collections / views / models like this :

    router.on('route', function() { console.log('we have routed'); });

I did liks this: EDMS.routers.navigate("dashboard/"); but i am getting a error as : TypeError: EDMS.routers.navigate is not a function [Break On This Error] EDMS.routers.navigate("dashboard/"); — 3gwebtrain, May 11 '13 at 08:45
i am getting the error as : TypeError: Backbone.Router is undefined (routers.js (line 5)), we should not use the singleton method while we use require.js.. if so why? — 3gwebtrain, May 11 '13 at 09:30
Yep, there was a typo in my answer, look again in my `router` code — drinchev, May 11 '13 at 09:32

backbone navigate not listened by the routers, but onload it works

1 Answers1