Search code examples
requirejsdurandalsingle-page-applicationhottoweldurandal-2.0

Route Not Found using createChildRouter


For my folder structure, i have (withing the Apps folder) views and viewmodels folders. I keep getting "route not found" when I try to click on one of the links. Chrome also shows "route not found" when the page loads. New to the childRouter. Any ideas why I am getting "route not found?"

LVAvailabillity viewmodel-

 define(['plugins/router', 'durandal/system',  'knockout'], function (router, system, ko) {

var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'viewmodels',
route: '',
fromParent: true
}).map([
   { route: 'AccessDenied', moduleId: 'AccessDenied', title: 'AccessDenied',                                                          type: 'intro', hash: '#AccessDenied', nav: true },
   { route: 'LCPost', moduleId: 'LCPost', title: 'LCPost', type: 'intro', hash: '#LCPost',     nav: true }
]).buildNavigationModel();

var vm = {
    router: childRouter,
    title: 'Letter Of Credit',
    introSamples: ko.computed(function () {
        return ko.utils.arrayFilter(childRouter.navigationModel(), function (route) {
            return route.type == 'intro';
        });
    }),
    detailedSamples: ko.computed(function () {
        return ko.utils.arrayFilter(childRouter.navigationModel(), function (route) {
            return route.type == 'detailed';
        });
    })
};

Solution

  • The missing component here was not using a splat route. I changed the code as follows and it worked (only thing changed was adding the star * )-

     var childRouter = router.createChildRouter()
     .makeRelative({
     moduleId: 'viewmodels',
     route: '',
    fromParent: true
    }).map([
         { route: '*AccessDenied', moduleId: 'AccessDenied', title: 'AccessDenied',                                                          type: 'intro', hash: '#AccessDenied', nav: true },
         { route: '*LCPost', moduleId: 'LCPost', title: 'LCPost', type: 'intro', hash:   '#LCPost',     nav: true }
     ]).buildNavigationModel();