Durandal js路由器设置

Durandal js router setup

本文关键字：设置 路由器 js Durandal      更新时间：2023-11-16

我已经设法让一个简单的路由器工作，甚至为我的子菜单创建了一个子路由器，但有一两件事我不确定它们为什么会出现。医生给你一个基本的支撑，然后你就可以自己了。

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

首先，提到了"splat"路由，但它并没有真正解释它们是什么或你可能如何使用它。你得到的只是一个JS的示例，如果不展示它的使用方式，它就毫无意义。我的假设是，它们意味着某种通配符系统，在一条线上定义多条路线？但不完全确定。

其次，当定义子路由器时，他们在"type:'intro'"的路由上设置一个属性。但没有提到原因，似乎只与子路由器有关。有人知道这种类型指的是什么以及不同的值是什么吗？

总的来说，这个框架给我留下了深刻的印象。我很快就制作出了一款外观非常精致的网络应用程序。只是现在我想更深入地了解，文档没有涵盖那么多细节。

编辑
我四处搜寻，终于找到了更多关于飞溅路线的信息。它看起来像是一个从主干网和其他网络复制而来的概念
http://backbonetutorials.com/what-is-a-router/

基本上，如果我映射路线"section/*details"，那么该路线将匹配以section/开头的任何路径，并且/之后的所有内容都将作为一个名为details的参数传递。我知道这对子路由器有多有用，因为它将确保深度链接有效。我们希望确保对section/admin的请求首先到达父路由器（section/part），然后到达子路由器（admin）。

但是仍然没有得到这个类型参数。我找不到任何解释。

查看以下示例。淘汰样本是您想要的，因为它展示了典型的子路由器用例。

  1. http://durandaljs.com/documentation/Understanding-the-Samples.html
  2. http://durandaljs.com/samples.html#knockout-样品
  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

类型参数用于创建两组导航链接。这是通过在vm中创建在view中的foreach循环中消耗的经滤波的ko.computed来实现的。

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>
相关文章：