配置子路由器以在父路由器视口 html 绑定中组合模块

Question

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

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

到目前为止，我所做的一切尝试，包括调用父路由器来委派路由（作为实验）都失败了。让我怀疑这是否可能。

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

shell.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();
        }
    };

shell.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 布局和页面外观。一切都应该表示为一个面板，并在击中路线时换成不同的面板。目前，这种方法将有两个面板不断打开。请查看下面的照片，以更好地了解我的意思。

Answer 1

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