Using Durandal to create Single Page Apps where view load in Vertical fashion one after another

Question

I have been looking around to create a sort of Single Page Application ( It may not be SPA ). My design involves scenario where i want to load views one after another on single page. Something like this.

View1
    [ Save and Continue, Edit, Cancel ]=> Button
View2 
    [ Save and Continue,Edit, Cancel ]=> Button
View 3 
    [ Save and Continue, Edit, Cancel ]=> Button

Each of next view's content depends on the options selected on previous screen. The application grows vertically with scroll bar ,without postback, where user can pretty much go back and edit the content of previous View. Depending on the user interaction the buttons would be visible such as Edit,Save and Continue and cancel.

I want to load my views Vertically instead of what I have been seeing in Durandal examples where it replaces the current content while staying on same page.

1. Does my design fits in Single Page Apps ?
2. If yes then, is Durandal right fit for such type of design ?
3. how can we achieve this using Durandal ? Any basic example with just 2-3 views in similar fashion would be great jumpstart for naive like me.
4. Do you see any loop holes or issues with such design ?

Any help would be appreciated !!!

Answer 1

I think you can use Durandal and knockouts compose binding to bind three views one after another.

 <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
 <!--/ko-->

I didn't try it out by myself but I think you can bind to your views instead of binding to router.activeItem.

See this http://durandaljs.com/documentation/Composition/ for more information on how to do it.

Also this seems to related to your question:

https://groups.google.com/forum/?fromgroups=#!searchin/durandaljs/multiple $20views$20on$20the$20same$20page/durandaljs/ZjwpwE2rqd0/58bgmD92P8AJ