Backbone.js: how to redirect from one view to another view?

Question

In Backbone.js, what is the equivalent of HttpResponseRedirect in Django?

In one Backbone.View, I need to submit data to the server, and then redirect the user to another view. How does this work? Should I use event or router?

Thanks!

Answer 1

It's important to understand that Backbone is not a stateless web server, so a "redirect" might sound like what you want, but it most likely isn't. If you have any experience in building stateful desktop applications, draw from that experience and how you would move from one screen to another. If you don't have any desktop client experience, I highly recommend you get some of that under your belt because a Backbone app is a stateful app, it just happens to run in a browser.

Assuming you've got some stateful app knowledge, you have a couple of options for making this work.

Router.navigate: the "redirect" equivalent (not a fan of this)

After your call to the server has come back, you can call your router's navigate method: myRouter.navigate("/myRoute", true). Be sure to pass the true argument as the second parameter. Or, like JasonOffutt suggest, just manually update the url's hash fragment and it's effectively the same thing.

I'm not fond of this, but some people are.

Procedural workflow

You can create a very simple object that knows how to put the right view on the screen, when you call a method. For example, if you need to show a view called "WidgetView", create an object with a method called showWidgetView. Make the object with this method available anywhere in your code by attaching it to a namespace, passing it to your running code, or some other technique. When your call to the server returns, call the object's showWidgetView method and let it show the next view for you.

This is functional, but it gets messy quickly in anything other than really small apps. I do this in small apps, though. When you get to larget apps, you need to think about evented workflow and event-driven architectures.

Events and workflow

After your server call returns, fire off an event using something like an event aggregator, letting other parts of your system know that something important just happened. These other parts of the system can then figure out what to do in response, including call code that replaces the current view with a new one, updates the url route, etc.

When you go down the path of using events, eventually you'll run into a cluster of code that doesn't seem to fit anywhere, nicely. This is usually your event handlers, and is usually a sign of an object / concern that wants to be encapsulated. Creating higher level workflow objects in Backbone is a good idea if you're using an event driven architecture.

These workflow objects are generally responsible for kicking off a workflow by getting all of the right views and models in place, and then contain event handlers for your views and / or event aggregator. The event handler methods will check the state of the app either through the args passed through the method, or by looking at some other state, and figure out what needs to happen next. Then it will cause the app to change to whatever it needs to look like, based on the new state.

Also, a workflow object is not a backbone construct. It's something that you'll build yourself, just using plain old JavaScript.

...

Hope that helps.

Answer 2

Here's the approach I've been taking:

Assuming you have a router defined with routes like these:

var MyRouter = Backbone.Router.extend({
    routes: {
        'first-route': 'first',
        'second-route': 'second'
    },
    first: function() {
        // render first view
    },
    second: function() {
        // render second view
    }
    // ...
});

I usually just use tags and set the href attribute to the hash I want to redirect to:

<a href="#first">First</a>

Alternatively, if you want to "redirect" from within your JavaScript, you could set the location hash explicitly:

window.location.hash = 'first';

I'm not 100% sure that the latter is 'best practice', but I've seen it done in a number of good tutorials.

// Edit

So after re-reading your original question, you could 'redirect' after sync calls back from the server simply by setting the location hash.