Durandal JS路由器设置 [英] Durandal js router setup

问题描述

我设法使一个简单的路由器工作，甚至为我的子菜单创建了一个子路由器，但是我不确定其中有一两个问题.文档为您提供了基本的帮助，然后您就可以依靠自己了.

所以我正在从这里阅读文档:
http://durandaljs.com/documentation/Using-The-Router.html

首先，提到了"splat"路由，但并没有真正解释它们是什么或如何使用.您所得到的只是JS的一个示例位，在不显示其用法的情况下没有任何意义.我的假设是它们意味着某种通配符系统，可在一条线上定义多个路由?不过，还不能完全确定.

第二，当定义子路由器时，它们将在类型:'介绍'"路由上设置属性.尽管没有提及原因，但它似乎只在子路由器上才有意义.有谁知道这种类型指的是什么以及不同的值是什么?

总体而言，这个框架给我留下了深刻的印象.我已经设法立刻完成了一个看上去非常复杂的Webapp的开发工作.只是我现在想更深入地理解，而文档并没有涵盖那么多细节.

编辑
到处挖掘我已经设法找到了更多关于摔跤路线的信息.它看起来像是从骨干加上其他概念复制而来的.
http://backbonetutorials.com/what-is-a-router/

基本上，如果我映射路线"section/* details"，则此路线将匹配以section/开头的任何路径，并且/之后的所有内容都将作为名为details的参数进行传递.我知道这对子路由器有什么用，因为它将确保深层链接有效.我们要确保对节/管理员的请求首先到达父路由器(该节/部分)，然后再到子路由器(管理员).

虽然仍然没有获得此类型参数.我在任何地方都找不到解释.

解决方案

看看以下示例.您正在寻找基因剔除样本，因为它演示了典型的子路由器用例.

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. com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/ko/index.js

类型参数用于创建两组导航链接.这是通过在vm中创建过滤后的ko.computed来实现的，该过滤后的ko.computed在view的foreach循环中使用.

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>

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.

解决方案

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>

这篇关于Durandal JS路由器设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！