CODEWITHSUNDEEP
jquery-mobilebackbone.jsbackbone-routing
Evan
Evan

Reputation: 456

Why is my backbone router redirecting to the app root?

I'm using the following router in my app:

app.Router = Backbone.Router.extend({
    // define the route and function maps for this router
    routes : {
        "" : "showLogin",
        // Sample usage: http://ServerManager/
        "login" : "login",
        // Sample usage: http://ServerManager/#login
        "logout" : "logout",
        // Sample usage: http://ServerManager/#logout
        "folders" : "listFolders",
        // Sample usage: http://ServerManager/#folders
        "folders/:name" : "showFolder",
        // Sample usage: http://ServerManager/#folders/System
        "*other" : "defaultRoute"
        // Sample usage: http://ServerManager/#badHash
    },
    showLogin : function() {
        console.log("Home page loaded. Redirecting to #login page.");
        this.navigate("login", {trigger: true, replace: true});
    },
    login : function() {
        //console.log("login route fired");
        // delete sessionStorage items and load a new loginview
        this.changePage(new app.LoginView()); 
    },
    logout : function() {
        //console.log("logout route fired");
        // Clear the token and other session items from sessionStorage
        sessionStorage.clear();
        this.navigate("login", {trigger: true, replace: true});
    },
    listFolders : function() {
        //console.log("listFolders route fired.")
        if (app.folderView === undefined) {
            console.log("creating new app.folderView");
            app.folderView = new app.FolderView();
        }
        else {
            console.log("using existing app.folderView");
        }
        this.changePage(app.folderView);
    },
    showFolder : function(name) {
        console.log( app.router.routes[Backbone.history.fragment] );
        //console.log("showFolder route fired.")
        this.changePage(new app.ServiceView({folder : name}));
        console.log( app.router.routes[Backbone.history.fragment] );
        //app.router.navigate("folder/" + name, {trigger: false});
    },
    defaultRoute : function() {
        alert("Error. Page doesn\'t exist.");
    },
    changePage : function(page) {
        $(page.el).attr("data-role", "page");
        page.render();
        $("body").append($(page.el));
        var transition = $.mobile.defaultPageTransition;
        $.mobile.changePage($(page.el), {changeHash : true, transition : transition});
    }
});

If I use

app.router.navigate("folders", {trigger: true, replace: true});

it successfully sends the app to server/#folders, but when I pass 

app.router.navigate("folders/" + id, {trigger: true, replace: true});

it triggers the root of the app and loads my login page. I can see the correct URL (e.g. server/folders/folder1) temporarily flash before the redirect happens. Any ideas as to what's happening here?

Upvotes: 0

Views: 1350

Answers (1)

nickaknudson
nickaknudson

Reputation: 4807

Backbone routers expect more generic routes last.

Set-up the folders/:id route followed by the folders route.

UPDATE

Actually, after thinking about it, this may not be the case. Can you post console output? Is it calling the correct function?

Perhaps the $.mobile ... changeHash: true is conflicting. You should probably only have one of the frameworks change the url hash for you.

Upvotes: 1

Related Questions