1

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

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>

在视图模型（.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;

因此，当我尝试导航到新任务视图时，任务列表根据 HTML 中的 KO 绑定绑定在脉冲视图中，但现在在任务列表视图模型中——

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

我收到“找不到路线”错误，请帮助

4

2 回答 2

0

我猜你的问题是在启动函数中调用 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()
    ...
}

因此，您最终应该能够导航到以下路线：

  • ＃脉冲
  • #脉冲/创建
  • #脉冲/编辑/1
于 2014-01-25T08:23:01.047 回答
0

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

于 2014-01-16T21:36:47.057 回答