Durandal Subrouting (热毛巾) [英] Durandal Subrouting (Hottowel)

问题描述

基本上，我正在尝试在菜单中创建一个菜单.因此，在主菜单路线中，会有一个带有另一组路线的垂直菜单.单击子菜单路由时，仅更新部分页面，垂直菜单不会重新加载.我猜它会类似于这个 KO fiddle http://jsfiddle.net/dPCjM/，但是还需要另外一套主路由视图中的幽灵"KO 指令:

Basically, I am trying to create a menu inside a menu. So, within a main menu route, there will be a vertical menu with another set of routes. When clicking on the submenu routes, only a part of the page gets updated, and the vertical menu does not reload. I am guessing it would be similar to this KO fiddle http://jsfiddle.net/dPCjM/, but there would need to another set of "ghost" KO directives in a main route view:

 <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
 <!--/ko-->

以及 durandal 路由器上的一些其他配置...

and some other configs on the durandal router...

澄清一下，我并不想在其中一个主菜单项中创建下拉菜单.我正在尝试在其中一个视图中创建一个菜单.基本上是 durandal 应用程序中的一个 durandal 应用程序 :)

And to clarify, I am not trying to create a dropdown in one of the main menu items. I am trying to create a menu inside one of the views. Basically a durandal app inside a durandal app :)

框架??:)))))))))))

IFRAMES?? :))))))))))

推荐答案

编辑

从 Durandal.js 2.0 开始，路由器插件现在有一个内置的子路由器，允许深度链接开箱即用.

EDIT

As of Durandal.js 2.0 the Router pluggin now has a built in Child Routers which allows for deeplinking out of the box.

durandal 路由器插件是 sammyjs 的包装器.

The durandal router plugin is a wrapper around sammyjs.

路由器插件允许您控制浏览器历史堆栈，还让您的水疗中心能够链接到水疗中心内的页面.

The router plugin allows you to control the browser history stack and also gives your spa the ability to link into pages w/in your spa.

它很容易实现 1 级深度链接，其中您有 1 个主菜单和交换进出的页面.但是，如果您想在主菜单中有一个子菜单并提供深度链接.

Its pretty easy to get it to do linking 1 level deep where you have 1 main menu and pages that swap in and out. But what if you wanted to have a sub menu w/in the main menu and provide deep linking.

当路由器排队交换视图时，viewmodel 激活器首先检查请求是否适用于您的视图模型中的同一页面.如果它是相同的视图，那么您可以在路线发生之前取消路线.通过在调用同一页面时取消路由，您可以获取路由参数并自己处理子路由.

When the router is queued to swap views the viewmodel activator first checks if the request is for the same page in your viewmodel. If it is the same view then you can cancel the route before it happens. By canceling the route when it calls the same page this allows you to take the route parameters and handle the subroute yourself.

检查它是否调用同一页面的方法位于名为 areSameItem 的视图模型中.您可以通过调用在主视图模型中覆盖此方法:

The method that checks to see if its calling the same page is in the viewmodel called areSameItem. You can override this method inside your main viewmodel by calling:

return App = {
  router: router,
  subPage: ko.observable('defaultSubPage'),
  activate: function () {
     router.activeItem.settings.areSameItem = function (currentItem, newItem, data) {
        if (currentItem != newItem) { return false; }
        else { App.subPage(convertSplatToModuleId(data.splat)); return true; }
     }
  }
}

当然这是在 amd 模块中，而 router 是 durandal 路由器插件.convertSplatToModuleId 是一个函数，它采用 splat 属性，即路由值，并将其转换为您希望显示的子页面的模块.

Of course this is inside an amd module and router is the durandal router plugin. convertSplatToModuleId is a function that takes the splat property, which is the route values, and converts it to the module of the sub page you wish to show.

所以，这部分很简单，但还有 1 件事需要完成.

So, that part was easy but there is 1 more thing that needs to be done.

<div data-bind="compose: { model: subPage, afterCompose: router.afterCompose }"></div>

您对子页面容器的绑定需要调用 router.afterCompose，因为这是告诉路由器路由已完成并准备好处理新路由的原因.

Your binding for the container of the subPages needs to call router.afterCompose because this is what tells the router that the route has been completed and its ready to handle new routes.

这不是一个容易解释的任务.所以，我创建了一个示例并将其推送到这里的github.

This is not an easy task to explain. So, I created an example and pushed it to github here.

这篇关于Durandal Subrouting (热毛巾)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！