CODEWITHSUNDEEP
javascriptbackbone.jsmarionette
jd.
jd.

Reputation: 4098

View changes with Backbone router constantly revert to home page

I can't seem to solve this simingly simple problem.

I have a Backbone/Marionnette application, where I define the router as:

app.utils.AppRouter = Backbone.Marionette.AppRouter.extend({

initialize: function(){

    this.route("", "home", function(){
        console.log("In home!");
        app.layout.content.show(new app.views.BrowseRestaurantsLayout());
    });

    this.route("account", "account", function(){
        console.log("In account!");
        app.layout.content.show(new app.views.AccountView());
    });
}
});

Somewhere else in my code, I need to navigate to the #account page, so I call:

 app.router.navigate('account', {trigger:true});

I can the see the URL change to #account and my AccountView page does appear for an instant, then disappears, to be replaced by the home page.

When I trigger the change the console reads:

In account! 
In home!

What am I missing?

Upvotes: 0

Views: 415

Answers (3)

Raya
Raya

Reputation: 11

Have you checked your templates? I had a similar problem, and found that the issue was the href in my link.

  <a href=#"></a>

It caused the router to send me back to root after temporarily switching the URL to the one I actually wanted.

Upvotes: 1

Derick Bailey
Derick Bailey

Reputation: 72858

I'm not sure if this will solve anything, but the way you have your router configured is odd. I don't see a need for Marionette's appRouter since you're not using it's features, and I wouldn't configure the routes in the initialize method. It would more "backbone-like" to configure a router this way:


app.utils.AppRouter = Backbone.Router.extend({

  routes: {
    "": "home",
    "account": "account"
  },

  home: function(){
    console.log("In home!");
    app.layout.content.show(new app.views.BrowseRestaurantsLayout());
  },

  account: function(){
    console.log("In account!");
    app.layout.content.show(new app.views.AccountView());
  }
});

The way you're defining the routes may have something to do with it.

Upvotes: 0

Mustafa Alammar
Mustafa Alammar

Reputation: 656

Your home route might be a catch-all which is being called after your account route.

What happens when you change the route to this?

this.route("/", "home", function(){
    console.log("In home!");
    app.layout.content.show(new app.views.BrowseRestaurantsLayout());
});

Or maybe it's the order of the routes. Try adding the home router last.

Upvotes: 1

Related Questions