How do I architect single page application using Knockout?

Question

I have begun to play with Knockout recently and I must say it is truly awesome and the power that it can bring to web applications.

However now I want to do something real world and architect my solution using Knockout. Eg. How should my viewmodels be initialized. Where should they go? I am mainly targeting single page application. So, I am interested in architecting single page applications mainly.

Answer 1

There are a lot of pieces to the puzzle, but here is a short list for me.

DISCLAIMER: I'll make some assumptions about your app too, so some of it will vary. Also, this is just one way to do it. There are may good ways. But this should be a good starting point for you.

Assuming your app is a set of abut 5 main views in a SPA:

1. Create a master/shell html page to house the app
2. Create a view / partial page (html) for each view. Each view is hidden til you navigate/route to it.
3. Create a viewmodel that can be bound to each view Create a bootstrapper.js that kickstarts everything.
4. Bootstrapper should crank up any routing engine you use (sammy, history, etc)
5. Bootstrapper will bind the views to the viewmodels Bootstrapper can also crank up any seed data and state for your SPA
6. Tip: Use SoC. Have your viewmodels be models for views. Don;t have them do routing, ajax calls, ui manipulation, etc. Have separate objects for other functions. DRY, KIS, SoC ... all good stuff :-)

I use the Revealing Module Pattern for creation of my viewmodels, though standard Module is perfectly fine too.

If you ave a more specific question, happy to answer that. I tried to keep this short cuz in truth it's not a 5 minute answer. In fact, I'm writing a course for Pluralsight on one way to do this coming in August 2012 :-)

Answer 2

For those who need an updated alternative (2015)... Another option (and a very good one) is to use Yeoman to scaffold a single-page-app for you as described in Steven Sanderson's blog here

It does all the architecturing you need for you so you can concentrate on writing code. Try best to harness the re-usability of the knew knockout component feature - it's amazingly described by Steve Sanderson so I won't take away the glory of his well done work.