I'm creating a SPA website.
Based on the durandal template in visual studio, we have main.js file which defines:
app.setRoot('viewmodels/shell', 'entrance');
and we have 2 child page are welcome.js and flickr.js have been injected to shell page.
I want to inject a page to child page like welcome.js has been injected to shell.
It means that I want to have many levels child page with can be injected like this description:
Level 1 : index.cshtml
Level 2 : shell.js/shell.html
Level 3 : welcome.js/welcome.html - flickr.js/flickr.html
Level 4 : child1.js/child1.html - child2.js/child2.html.......
Level n : ............
You can indeed nest views, using child routers. See http://durandaljs.com/documentation/Using-The-Router.html (section 'Child Routers') for more info. However, from my own experience using child routers, nesting views creates a lot of problems. It also doesn't make sense to do this a lot, e.g. going 4 levels deep like you suggest.
It seems like you do not really want to nest views (views are sort of 'pages'), but you want to put certain elements into views, and maybe nest elements in elements, and give all those elements a viewmodel so you can give them behavior. If this is indeed the case, I suggest using Durandal's widgets instead: http://durandaljs.com/documentation/Creating-A-Widget.html
Widgets, in my opinion, are a lot more flexible than nested views through child routers.