javascriptdurandaldurandal-navigation

Durandal Child router not finding views


Just before I go into the issue here is an overview of my project structure

-- Common
    --services
    --views
    --viewmodels
 -- Product1
    --services
    --views
        -- mywork
            -- overview.html
            -- sections
                -- audit.html
                -- completed.html
                -- attention.html
                -- index.html
    --viewmodels
        -- mywork
            -- overview.js
            -- sections
                -- audit.js
                -- completed.js
                -- attention.js
                -- index.js

Now I've set up a section in Product1 called mywork that contains a child-router. The core route in shell.js is set using a splat.

{ route: 'myWork*details', moduleId: 'product1/viewmodels/myWork/overview', title: 'My Work' }

Then the child route is created as

var childRouter = router.createChildRouter()
            .makeRelative({ moduleId: 'product1/viewmodels/mywork/sections', fromParent: true })
            .map([
                { route: [''], moduleId: 'index', title: 'Overview', icon: 'fa-cogs', nav: false },
                { route: 'audits', moduleId: 'audits', title: 'Audits', icon: 'fa-list', nav: true },
                { route: 'completed', moduleId: 'completed', title: 'Tracked Records', icon: 'fa-list', nav: true },
                { route: 'attention', moduleId: 'attention', title: 'Requires Attention', icon: 'fa-list', nav: true }
            ]).buildNavigationModel();

The main issue is that when accessing any of the pages through a navigation bar I'm given the error...

View Not Found. Searched for "product1/views/mywork/sections/audits" via path "text!product1/views/mywork/sections/audits.html".

Yet the view for the overview page works fine defined by the route ['']. Any ideas as to why my other views are not found even though the viewmodels are and what is text! before the path in the error?


Solution

  • Note made, Child routes require at least a <div></div> tag in the html files which I assume is due to some type of id assignment otherwise the view will not be found by a child router.