子視圖使用Durandal的構圖

我有一個視圖，它由具有添加/編輯功能的另一視圖（子視圖）組成，現在我想使用路由，以便在單擊添加一個新視圖（添加）時顯示替換原來的觀點，我一直在使用子路由器嘗試，但它不工作...子視圖使用Durandal的構圖

殼牌是我安裝我的路由器將用戶引導至脈衝查看我的第一個觀點 -

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;

所以任務列表是脈視圖綁定爲每KO在HTML結合，但現在在任務列表視圖模型，當我嘗試導航到新任務視圖 -

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

我得到一個「路線Not Found」錯誤，請幫忙

來源

2013-11-01 akhil

你可以舉一個你的代碼的例子嗎？ – chafnan

我用代碼更新了我的問題 – akhil

看起來好像你正試圖調用一個用必需的參數聲明的途徑但沒有傳遞價值。如果您通過設置var url ='＃newTask/idvalue'來傳遞taskId，那麼應該解決'Route Not Found'錯誤。

來源

2014-01-16 21:36:47 Barry

我想你的問題是在引導函數中調用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/edit/1

來源

2014-01-25 08:23:01

子視圖使用Durandal的構圖

回答

相關問題