Durandal JS路由器设置

基本上，如果我映射路线"section/* details"，则此路线将匹配以section/开头的任何路径，并且/之后的所有内容都将作为名为details的参数进行传递.我知道这对子路由器有什么用，因为它将确保深层链接有效.我们要确保对节/管理员的请求首先到达父路由器(该节/部分)，然后再到子路由器(管理员).虽然仍然没有获得此类型参数.我在任何地方都找不到解释.解决方案看看以下示例.您正在寻找基因剔除样本，因为它演示了典型的子路由器用例. http://durandaljs.com/documentation/Understanding-the-Samples.html http://durandaljs.com/samples.html#knockout-samples https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/shell.js 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.htmlFirst, 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.EDITDigging 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.http://durandaljs.com/documentation/Understanding-the-Samples.htmlhttp://durandaljs.com/samples.html#knockout-sampleshttps://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/shell.jshttps://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/ko/index.jsThe 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路由器设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！