Correctly configuring Routers for Parent Child Relationship in backbone Marionette

Question

Trying to create a page that allows users to add edit and view a parent child combined.

UI has 3 columns Parent : List of Parents Children : Child

I want to configure the controllers(s) so that users can come back to right where they were but see no need to have it so both Parent and child can be editable.

// Getting closer using backbone marionette but still having some small issues

    MyRouter = Backbone.Marionette.AppRouter.extend({
        appRoutes: {
            '': 'AddClient',
            'View/:clientid': 'ViewClient',
            'Edit/:clientid': 'EditClient',
            'View/:clientid/Add': 'PolicyAdd',
            'View/:clientid/View/:policyid': 'PolicyView',
            'View/:clientid/Edit/:policyid': 'PolicyEdit'
        }
    });

    someController = {
        AddClient: function () {
            var someView = new ClientAdd();
            MyApp.clientPane.show(someView);
        },
        ViewClient: function (clientid) {
            var someView = new ClientView();
            MyApp.clientPane.show(someView);
        },
        EditClient: function (clientid) {
            var someView = new ClientEdit();
            MyApp.clientPane.show(someView);
        },
        PolicyAdd: function (clientid) {
            this.ViewClient(clientid);
            var someView = new PolicyAdd();
            MyApp.policyPane.show(someView);
        },
        PolicyView: function (clientid, policyid) {
            this.ViewClient(clientid);
            var someView = new PolicyView();
            MyApp.policyPane.show(someView);
        },
        PolicyEdit: function (clientid, policyid) {
            this.ViewClient(clientid);
            var someView = new PolicyEdit();
            MyApp.policyPane.show(someView);
        }
    };

Having the "this.ViewClient" feels hacky and also doesn't work.

Answer 1

Multi-part answer, here...

"this.ViewClient is not a function"

this is a bug in Marionette. the controller method is called in the context of the router instead of the controller, so the call to this.ViewClient is trying to find it on the router.

oops.

bug logged. will fix asap. https://github.com/derickbailey/backbone.marionette/issues/38

--

UPDATE: this bug is now fixed in v0.5.1 of Backbone.Marionette https://github.com/derickbailey/backbone.marionette

--

to work around this issue for now, you can do this:

PolicyEdit: {
  someController.ViewClient();
  // ...
}

If that doesn't work, you may need to use Underscore.js' bind or bindAll methods to ensure the correct binding on your controller functions.

These workaround won't be necessary once i get the bug fixed... hopefully later today / tonight.

is basically calling other routes the best way to manipulate multiple regions?

The direct answer to this question is no.

But, you're not calling a route in this case. You're calling a method on your controller. That's perfectly fine - and actually, I would encourage this. It's a proper use of your object, and is one of the things that I think should be done instead of calling another route / router handler.

Routers And Controllers

A router is a feature, not an architectural requirement. Your app should work without a router, and a router should only add the ability to use bookmarks and the browser's forward/backward button.

With that philosophy in mind (which I know is controversial), using a controller like you have and calling multiple methods on your controller in order to get your application to the correct state, is one of the right approaches to take.

Look at it this way: if you removed the router from your app, you would be forced to call methods on your controller directly. To prevent duplication of code, you'll want to create many small methods on your controller that can do one thing very well, and then compose larger methods out of those smaller methods.

Hope that helps. :)