Durandal - 子路由器可以重复使用相同的模型

Question

我正在尝试将路由器配置为允许一个模型用于多个视图。

这是一个“配置文件”模块，所以我有一个像这样的顶级路由器：

.map([{ route: ['profile*details', ''], moduleId: 'myprofile', title: 'Your Profile', hash:'#profile', nav: false } ])

在 myprofile.js 模块中，我有子路由器：

define(['services/unitofwork', 'services/logger', 'durandal/system', 'durandal/activator', 'viewmodels/profile', 'plugins/router', 'durandal/app', 'services/errorhandler'],
function (unitofwork, logger, system, activator, Profile, router, app, errorhandler) {
    var MyProfile = function () {

        this.router = router.createChildRouter()
        .makeRelative({
            moduleId: 'my',
            fromParent: true
        }).map([
            { route: ['details'], moduleId: 'details', title: 'Details', type: 'intro', nav: true },
            { route: 'search', moduleId: 'jobsearch', title: 'Job Postings', type: 'intro', nav: true },
            { route: 'resume', moduleId: 'resume', title: 'Resume', type: 'intro', nav: true },
            { route: 'account', moduleId: 'account', title: 'Subscription', type: 'intro', nav: true }
        ]).buildNavigationModel();
 }
return MyProfile;
});

我的理解是，如果我使用 splat 路由 (profile*details) 声明主模块，并且该模块在定义子内部路由的路由器属性上返回一个子路由器，那么我可以继续使用与每个内部视图组成的子模块。

基本上我想将 viewmodels/myprofile.js 模块与

views/my/details.html

views/my/resume.html

等等。

将工作单元与 Breeze 结合使用，此模式将使我能够在停用每个子视图时强制执行保存检查，但无需再次重新加载整个配置文件。

似乎 canReuseForRoute 属性可能有用，但我认为没有必要考虑到http://durandaljs.com/documentation/Using-The-Router.html - 模块重用--

考虑历史更改导致导航的场景 导致与已经处于活动状态并正在查看的模块相同。 通常，即使模块是相同的类型，它也会 丢弃并创建一个新实例。有两个例外 这个：

如果模块有与之关联的子路由器。该实例将 被保存。如果模块实现了特殊的回调，则调用 canReuseForRoute，这个函数将被调用允许开发者 确定是否应该丢弃该模块。

我错过了什么吗？ 有没有可能做到这一点？

谢谢。

Answer 1

我的理解是，如果我用 splat route (profile*details)，并且该模块返回了一个子路由器 在定义子内部路由的路由器属性上，然后 我可以继续使用子模块来组合每个内部 查看。

你的理解是正确的。但是，逻辑是您的应用程序中会有另一个 shell，它可以有自己的菜单。

我不确定你是否已经实现它，但无论如何我都会发布我的答案。

在顶层路由器的主shell.js 中：

.map([{ route: 'profile*details', moduleId: 'myprofile', title: 'Your Profile', hash:'#profile', nav: false } ])

这将为每个视图模型创建一个 url：

#profile/details

#profile/jobsearch

#profile/resume .. etc..

然而，myprofile.js 是您的新外壳。 （即它的行为方式与 shell.js 相同）。

myprofile.js：

define(['services/unitofwork', 'services/logger', 'durandal/system', 'durandal/activator', 'viewmodels/profile', 'plugins/router', 'durandal/app', 'services/errorhandler'],
function (unitofwork, logger, system, activator, Profile, router, app, errorhandler) {
    var MyProfile = function () {

        this.router = router.createChildRouter()
        .makeRelative({
            moduleId: 'my',
            fromParent: true
        }).map([
            { route: '', moduleId: 'details', title: 'Details',  nav: true },// This is your home page now at the child router level
            { route: 'search', moduleId: 'jobsearch', title: 'Job Postings', nav: true },
            { route: 'resume', moduleId: 'resume', title: 'Resume', nav: true },
            { route: 'account', moduleId: 'account', title: 'Subscription', nav: true }
        ]).buildNavigationModel();
 }
return MyProfile;
});

请注意，第一条路线是空的，因为那是您的新主页。 我省略了type:'intro'，因为您不需要这样做。（这只是对路线进行分类的一种方法 在用户界面中）

myprofile 将充当一个新的外壳，所以myprofile.html 可能看起来像：

   <div class="col-md-2">
   <ul class="nav" data-bind="foreach: router.navigationModel">
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: hash }, html: title"></a>
                </li>
            </ul>
    </div>
   <div class="col-md-10">
          <!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
      </div>

您可以编写一个新的nav.html，或者按照我的方式进行。 您还可以将子菜单设置为水平的。我个人更喜欢垂直（"col-md-2"）。

这绝对可以让您保持使用子模块来组合每个内部视图，并且Unitofwork 只会在子级别加载。

canReuseForRoute 可以在某些情况下使用，例如parameterized routes，当您想要导航时 在相同的 Viewmodel 中并更改了参数。（例如，profile/1 到 profile/2）表示该模块是否可以用于路由。