Durandal js router setup

Question

I've managed to get a simple router working and even created a child router for my submenu but there are one or two things I'm not sure of why they're there. The docs give you a basic leg up and then you're on your own.

So I'm reading the docs from here:
http://durandaljs.com/documentation/Using-The-Router.html

First, there's mention of "splat" routes but it doesn't really explain what they are or how you might use it. All you get is an example bit of JS which means nothing without showing how its used. My assumption would be that they mean some sort of wildcard system of defining multiple routes on one line? Not entirely sure though.

Second, when defining the child router they are setting a property on the route of "type: 'intro'". There's no mention of why though and it only seems relevant on the child router. Does anyone know what this type refers to and what the different values are?

Overall I'm really impressed with this framework. I've managed to get a really sophisticated looking webapp roughed out in no time at all. It's just now I want to understand in a little more depth and the docs don't cover that much detail.

EDIT
Digging around I've managed to find out a bit more about splat routes. It looks like a concept that has been copied from backbone plus others.
http://backbonetutorials.com/what-is-a-router/

Basically if I map the route 'section/*details' then this route will match any path that begins section/ and everything after the / will be passed as a parameter called details. I see how this can be useful for child routers because it will ensure deep linking will work. We want to make sure a request to section/admin goes first to the parent router (the section/ part) and then to the child router (admin).

Still not getting this type parameter though. I can't find that explained anywhere.

Answer 1

Take a look at the following samples. The knockout sample is what you're looking for as it demonstrates the typical child router use case.

1. http://durandaljs.com/documentation/Understanding-the-Samples.html
2. http://durandaljs.com/samples.html#knockout-samples
3. https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/shell.js
4. https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/ko/index.js

The type param is used to create two sets of navigation links. This is accomplished by creating filtered ko.computed in the vm that are consumed in a foreach loop in the view.

ko/index.js

...
introSamples: ko.computed(function() {
    return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) {
        return route.type == 'intro';
    });
}),
detailedSamples: ko.computed(function() {
    return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) {
        return route.type == 'detailed';
    });
})
...

ko/index.html

<ul class="nav nav-list">
    <li class="nav-header">Basic Examples</li>

    <!--ko foreach: introSamples-->
    <li data-bind="css: { active: isActive }">
        <a data-bind="attr: { href: hash }, text: title"></a>
    </li>
    <!--/ko-->

    <li class="nav-header">Detailed Examples</li>


    <!--ko foreach: detailedSamples-->
    <li data-bind="css: { active: isActive }">
        <a data-bind="attr: { href: hash }, text: title"></a>
    </li>
    <!--/ko-->
</ul>