Routes with named params about backbone.subroute

[geekdave]

@revathskumar : Subroutes behave exactly the same as regular routes, including the way you set up a response function. Such as:

showTransaction: function(country) {
   // do something with "country" variable
}

The only difference is that all of the routes in a subroute are automatically prepended with whatever prefix was used to define the route. So let's say your routes above were part of a subroute that was instantiated like this:

var mySubRouteInstance = new VacationDestinationRouter("vacations");

Then your routes above would match URLs like http://example.org/#vacations/France/transaction. Your response function would get called with France as the country parameter.

Hope this helps. If you are still having issues, please attach some code and a description of what you're trying to do so I can understand the context.

[revathskumar]

@geekdave

I don't have a prefix like vacation. My URL looks like

• http://example.org/#France/transaction
• http://example.org/#France/report

Is there any that I can split transaction and report to different modules and subroutes?

[geekdave]

All subroutes require a prefix, but the prefix itself can contain parameterized route sections. For instance, let's say you define a subroute like this:

var TransactionRoute = Backbone.SubRoute.extend({
    routes: {
        ""               : "handleDefault",
        "search"         : "handleSearch",
        "view/:transactionId"   : "handleViewTransaction"
    },
    handleDefault: function(country) {
        alert("default - country: " + country);
    },
    handleSearch: function(country) {
        alert("search - country" + country);
    },
    handleViewTransaction: function(country, transactionId) {
        alert("view transaction - country: " + country + " id: " + transactionId);
    }
});

You can then create an instance of the subroute like this:

var transactionRoute = new TransactionRoute(":country/transaction");

All of the routes defined in your subroute will be created by concatenating the route prefix (which contains a parameterized section) with the routes in your subroute.

So if you navigate to http://example.org/#France/transaction/view/abc, you will trigger the handleViewTransaction route handler function with the parameters France and abc and get an alert that says: view transaction - country: France id: abc.

You could create a similar SubRouteExtension called ReportRoute, with similar handlers, and instantiate it like so:

var reportRoute = new ReportRoute(":country/report");

Note that this wasn't really how I intended subroutes to work, since the above subroute definitions require knowledge about how a particular instance of itself is instantiated (that there will be a country param in the prefix) but it works nonetheless. Generally I prefer the URL to be read from least-specific to most-specific, from left-to-right, with the module name that defines the subroute appearing first. So ideally the URL would be something like http://example.org/#report/France, and you could just use a subroute prefix of report, and have your route definition in the subroute simply be :country. But if your architecture requires this other URL format, then it will still work.

Let me know if this works for you...

EDIT: Clarified some language in last paragraph.

[pushchris]

Experiencing the same issue. It is caused by the following:

        if (hash.indexOf(prefix) === 0) {
            Backbone.history.loadUrl( hash );
        }

I submitted a pull request to hopefully solve the issue

[geekdave]

Thanks for the PR, Chris! I won't be able to look at this until later in the week. In the meantime, could you also please add a unit test to the PR that fails without your fix and passes with it? (Also verifying that the fix does not break any existing unit tests?) This will help me merge it much more quickly.

On Jun 30, 2013, at 1:16 AM, Chris [email protected] wrote:

Experiencing the same issue. It is caused by the following:

    if (hash.indexOf(prefix) === 0) {
        Backbone.history.loadUrl( hash );
    }

I submitted a pull request to hopefully solve the issue

—
Reply to this email directly or view it on GitHub.

[pushchris]

I have added a unit test that fails with your current code and functions correctly with mine. Also, all of your previous tests pass with the changes. The changes only effect initial loading of a URL