Question

When a model is changed, I update the route (it has a url that contains the application’s current state).

When a url is visited (or back is pressed) I update the model from the route.

This creates circular logic problems for me that I can’t get my head around. Things are being changed twice for no reason.

Is it normal to base everything on the route, and use that to update the model?
Is it normal to have two models?
What is normal?

Any help or advice would be appreciated. Thanks

Answer 1

I wouldn’t advise using Router the way you do. In general, the route action should not change model state. In general, HTTP GET operations should not have side-effects.

Routers should be used for navigation between different pages of a single-page application. Model changes should be triggered directly from the view code that handles user input. Let’s say you have a model User, and view UserView, the view could work something like this:

var UserView = Backbone.View.extend({
    events: {
        "click #save", "save"
    },

    initialize: function(options) {
        this.model = options.model;
    },

    render: function() {
        //your render code here
    },

    save: function() {
        var fields = {
            name: this.$("#name").val();
            email: this.$("#email").val();
        };

        this.model.save(fields , {
            //after save go back to users page, or whatever
            success: function() { window.location.hash = "/users"; },
            error: this.displayError
        });
    }
});

Backbone isn’t really an MVC framework, so the Router shouldn’t be treated as a pure controller. And even if you did, changing state in a route action would be equivalent to changing state in a MVC controller GET endpoint – bad, bad idea.

If you want to adhere to a pure MVC pattern, you should implement your own controller layer, or look at another layer besides Backbone.