标签: durandal-navigation

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

目标: 我希望利用子路由器通过应用程序的重要功能区域组织路由的隔离和封装优势.但是,我希望由父路由器视口绑定处理和组合这些路由.即

<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();
        }
    };
Run Code Online (Sandbox Code Playgroud)

shell.html

<div id="content" data-bind="router: { cacheViews: true }"></div>
Run Code Online (Sandbox Code Playgroud)

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
    };
});
Run Code Online (Sandbox Code Playgroud)

这种方法的唯一方法是将路由器视口绑定放在相应的index.html视图中.但是,基于我正在尝试设计的CSS布局和页面外观,这不是我所追求的.一旦路线被击中,所有东西都应该被表示为面板并换成不同的面板.目前,这种方法将有两个面板不断打开.请查看下面的照片,了解我的意思.

上面描述的CSS布局问题的照片

javascript knockout.js durandal-navigation durandal-2.0

20
推荐指数
1
解决办法
459
查看次数

Durandal 2.0 - 用于嵌套菜单的子路由器?

我正在构建一个应用程序,并希望显示一个2层菜单,两个层都始终可用.Durandal 2.0 推出了新的路由器,它支持"子路由器",可以更容易地进行深度链接.

我的问题 - 我可以永久加载我的'子级'导航路径(以及父级未处于活动状态时呈现的子菜单),或者是"子路由器"设计旨在延迟加载它们以在深层链接到达时评估它们被评估?

Durandal示例显示主导航寄存器是一个splat路由,然后当加载/激活该视图模型时,子路由器被注册.

例如:在Durandal 2.0提供的示例中,mian nev已注册 shell.js

router.map([
                { route: ['', 'home'], moduleId: 'hello/index', title: 'Validation test', nav: true },
                { route: 'knockout-samples*details',    moduleId: 'ko/index',               title: 'Knockout Samples',  nav: true, hash: '#knockout-samples' }
            ]).buildNavigationModel()
              .activate();
Run Code Online (Sandbox Code Playgroud)

然后ko/index.js视图模型注册孩子(上activate())

var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId:'ko',
            fromParent:true
        }).map([
            { route: '',                moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro' },
            { route: 'helloWorld',      moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro',      nav: true},
            { …
Run Code Online (Sandbox Code Playgroud)

durandal hottowel durandal-navigation

8
推荐指数
1
解决办法
5575
查看次数

Durandal - 未找到视图。间歇性地搜索“/”

我想知道是否有人在 Durandal.js 上遇到过类似的问题。

我收到一个间歇性的“未找到视图。搜索”错误,很难复制,因为只是偶尔发生。

当 createView 函数无法定位视图时,它似乎是从文件 viewEngine.js 中产生的。然而,该视图存在并且在 99% 的时间内都有效。

任何人都有类似的问题,或者知道我可以追踪并解决这个问题的方法吗?

谢谢。

durandal-navigation durandal-2.0

5
推荐指数
1
解决办法
865
查看次数

处理Durandal应用程序中视图的加载超时

我有一个Durandal应用程序,在尝试加载视图时会定期超时.这是一个示例超时错误:

Error: Load timeout for modules: text!views/primaryapplicants.html
http://requirejs.org/docs/errors.html#timeout
Run Code Online (Sandbox Code Playgroud)

如果您查找提供的URL,则会显示一些可能的问题:

  • 列出的模块中的脚本错误
  • 路径配置不正确
  • 多个模块ID映射到同一文件

这些都不是我的问题.这是一个真实的,真正的超时.由于某种原因,它无法加载视图文件.

有一些关于处理错误的RequireJS文档 ......但是在读了很多次之后,我仍然无法弄清楚如何在我的视图模块上捕获加载超时.

理想情况下,我想要做的是a)延长超时或b)给用户一个通知,并允许他们再次尝试加载视图.

现在发生的事情是视图无法加载,用户得不到有错误的反馈 - "请等待,加载"对话框消失,因为AJAX请求已完成,但视图不会更改.

javascript requirejs knockout.js durandal durandal-navigation

3
推荐指数
1
解决办法
1097
查看次数

Durandal中的条件路由

在我的基于HotTowel的项目中,我使用Durandal 1.1.1进行路由.

我有一个登录路由,如果用户没有登录,我想激活它.

我的路线配置如下:

var routes = [ {
    url: 'login',
    moduleId: 'viewmodels/login',
    name: 'Login',
    visible: true,
    caption: 'Login'
    },{
    url: 'moduledetail/:id',
    moduleId: 'viewmodels/moduledetail',
    name: 'ModuleDetail',
    visible: true,
    caption: 'ModuleDetail'
    }
Run Code Online (Sandbox Code Playgroud)

我想如果用户想去,#/moduledetail/1并且尚未经过身份验证,浏览器会导航到路由,#/login/moduledetail/1因此在成功登录路由后返回到#/moduledetail/1.

一个可能的解决方案是将一个navigateTocanActivatemoduledetail,如:

function canActivate()
{
    if (!loggedIn)
        router.navigateTo(`#/login/moduledetail/1`)
    return false;
}
Run Code Online (Sandbox Code Playgroud)

但导航到另一页canActivate似乎是如此愚蠢.

是否有任何方法告诉Durandal在路由时,在这种情况下使用这条路线?

single-page-application durandal hottowel durandal-navigation

2
推荐指数
1
解决办法
2380
查看次数

杜兰达尔路线的Asterix(*)

Durandal路线中Asterix的目的是什么?以下是文档中的示例:

route:'knockout-samples*details'
Run Code Online (Sandbox Code Playgroud)

编辑:使用Durandal 2.0

sammy.js single-page-application durandal durandal-navigation durandal-2.0

2
推荐指数
1
解决办法
125
查看次数