Question

我有一个View，它由另一个具有添加/编辑功能的视图（子视图）组成，现在我想使用路由，以便在单击添加新视图（添加）时显示替换原始视图，我有尝试使用子路由器，但它不工作...

Shell是我的第一个视图，我设置路由器以将用户带到Pulse视图 -

 function boot() {
        datacontext.getstartupdata().then(function () {
            log('Helium SPA Loaded!', null, true);

            router.on('router:route:not-found', function (fragment) {
                logError('No Route Found', fragment, true);
            });

            return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
                .map([{ route: '', moduleId: 'pulse', title: 'Pulse', nav: true }])            // Map the routes
                .buildNavigationModel() // Finds all nav routes and readies them
                .activate('');
            // Activate the router
        });
    }

现在在脉冲视图HTML中我有 -

<article class="tasks-container" >
            <!--ko router: { transition:'entrance' }--><!--/ko-->
        </article>

在View Model（.js）文件中我有 -

var childRouter = router.createChildRouter()
    .makeRelative({
        moduleId: 'viewmodels'
    }).map([
        { route: '', moduleId: 'tasklist', title: 'Task List', nav: true },
        { route: 'tasklist', moduleId: 'tasklist', title: 'Task List', nav: true },
        { route: 'newTask', moduleId: 'newTask', title: 'New Task', nav: true},
        { route: 'newTask/:taskId', moduleId: 'newTask', title: 'Edit Task', nav: true }
    ]).buildNavigationModel();

 var pulse = {
        activate: activate,
        compositionComplete: compositionComplete,            
        router: childRouter
    };

    return pulse;

所以Tasklist按照HTML中的KO绑定绑定在Pulse视图中当我尝试导航到New Task视图时，现在在Tasklist视图模型中 -

 var showNewTask = function() {
    var url = '#newTask/';
    router.navigate(url, { trigger: true, replace: false });
};

我收到“未找到路线”错误，请帮忙

Answer 1

看起来好像是在尝试调用使用必需参数声明但不传递值的路径。如果通过设置var url ='＃newTask / idvalue'传递taskId，则应解决'找不到路径'错误。

Answer 2

我猜你的问题是在boot-function中调用makeRelative。你无法使根路由器相对于某些东西 - 你可以创建一个相对于父路由器的子路由器。

可能是这样的（未经测试）：

router.map([
    { route: 'pulse*details', moduleId: 'viewmodels/pulse', title: 'Pulse', nav: true }
]);

并在脉冲视图模型中：

var pulse = {
    router: router.createChildRouter()
      .makeRelative({ moduleId: 'viewmodels/pulse', route: 'pulse' })
      .map([
        { route: '', moduleId: 'viewmodels/tasklist', title: 'Task List', nav: true },
        { route: 'create', module: 'viewmodels/newTask', title: 'New Task', nav: true },
        { route: 'edit/:id', module: 'viewmodels/newTask' title: 'Edit Task', nav: true }
      ])
      .buildNavigationModel()
    ...
}

所以你最终应该能够导航到以下路线：

#pulse
＃脉冲/创建
＃脉冲/编辑/ 1

子视图使用Durandal的组合

2 个答案: