Durandal js路由器设置

Ben*_*ley 1 javascript durandal durandal-2.0

我设法让一个简单的路由器工作,甚至为我的子菜单创建了一个子路由器,但有一两件事我不知道为什么他们在那里.文档给你一个基本的支持,然后你自己.

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

首先,提到"splat"路线,但它并没有真正解释它们是什么或如何使用它.你得到的只是JS的一个例子,没有显示它的使用方式,没有任何意义.我的假设是它们意味着在一条线上定义多条路线的某种通配符系统?虽然不完全确定.

其次,在定义子路由器时,他们在"type:'intro'"的路由上设置属性.没有提到为什么,它只在儿童路由器上看似相关.有谁知道这种类型的含义以及不同的值是什么?

总的来说,我对这个框架印象非常深刻.我已经设法让一个非常精致的webapp在任何时候都被淘汰出局.刚才我想要更深入地理解,文档并没有涵盖那么多细节.

编辑
挖掘我已经设法找到更多关于splat路线.它看起来像是从骨干和其他人复制的概念.
http://backbonetutorials.com/what-is-a-router/

基本上,如果我映射路径'section/*details',那么这条路线将匹配任何开始于/的路径/并且/之后的所有内容将作为一个名为details的参数传递.我看到这对子路由器有用,因为它可以确保深层链接能够正常工作.我们要确保对section/admin的请求首先发送到父路由器(部分/部分),然后发送到子路由器(admin).

仍然没有得到这种类型的参数.我无法在任何地方找到解释.

Rai*_*rit 5

看看以下样本.淘汰样本是您正在寻找的,因为它演示了典型的子路由器用例.

  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

类型参数是用来创建两套导航链接.这是通过创建过滤实现ko.computedvm有能力的消费foreach在循环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';
    });
})
...
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)