20

目标： 我想要利用子路由器按应用程序的重要功能区域组织路由的隔离和封装优势。但是，我希望这些路由由父路由器视口绑定处理和组成。IE

<div id="parentRouterViewport" data-bind="router: { cacheViews: true }"><div>

到目前为止，我尝试过的所有事情，包括调用父路由器来委派路由（作为实验）都失败了。让我想知道这是否可能。

为简洁起见，我只包括路由的关键任务代码部分。

外壳.js

return {
        router: router,
        activate: function() {
            return router.map([
                    { route: 'App*splat', moduleId: 'app/home/viewmodels/index', title: 'Home', nav: true }
                ]).buildNavigationModel()
                .mapUnknownRoutes('app/home/viewmodels/error')
                .activate();
        }
    };

外壳.html

<div id="content" data-bind="router: { cacheViews: true }"></div>

index.js（子路由模块）

var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId: 'app/home/viewmodels',
            fromParent: true
        }).map([
            { route: 'EligibiltySearch',    moduleId: 'eligibilitySearch',  title: 'Eligibility Search',    nav: true }
        ]).buildNavigationModel();

    return {
        router: childRouter
    };
});

唯一可行的方法是，如果我在相应的index.html视图中放置一个路由器视口绑定。但是，这不是我所追求的，基于我正在尝试设计的 css 布局和页面外观。一切都应该表示为一个面板，并在击中路线时换成不同的面板。目前，这种方法将有两个面板不断打开。看看下面的照片，更好地了解我的意思。

上述 CSS 布局问题的照片

4

1 回答 1

3

在我们的团队中，我们创建了自己的“子路由器”，使用 Knockout 变量来显示/隐藏基于选项卡按钮单击的子视图。一个警告是，您必须从主/父视图调用您的激活、停用、组合完成等，以使子视图工作。还有一些其他的陷阱，但我想我会给你这个作为一个选项，或者其他人稍后会看到这个问题。

于 2015-09-21T19:13:21.820 回答