使用 Durandal 的子视图合成答案

【问题标题】：Sub view Composition using Durandal使用 Durandal 的子视图合成
【发布时间】：2014-01-25 16:23:01
【问题描述】：

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

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 绑定绑定在 Pulse 视图中，但是当我尝试导航到新任务视图时，现在在任务列表视图模型中 --

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

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

【问题讨论】：

你能举个例子吗？
我已经用代码更新了我的问题

标签： durandal single-page-application durandal-2.0 durandal-navigation

【解决方案1】：

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

【讨论】：

【解决方案2】：

我猜你的问题是在启动函数中调用 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
#pulse/创建
#pulse/edit/1

【讨论】：