How do I architect single page application using Knockout?

StackOverflow https://stackoverflow.com/questions/10851219

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.

Was it helpful?

Solution

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 :-)

OTHER TIPS

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.

I just open-sourced the mini SPA framework I put together with Knockout being the major component.

knockout-spa A mini (but full-fledged) SPA framework built on top of Knockout, Require, Director, Sugar. https://github.com/onlyurei/knockout-spa

Live Demo: http://knockout-spa.mybluemix.net

Features

  • Routing (based on Flatiron's Director): HTML5 history (pushState) or hash.
  • Highly composable and reusable: pick modules/components for a page in the page-specific JS and they will be auto-wired for the page's HTML template
  • SEO ready (prerender.io)
  • Fast and lightweight (85 KB of JS minified and gizpped)
  • Two-tier bundle build for JS for production: common module that will be used by most pages, and page-specific modules that will be lazy-loaded
  • Organized folder structure to help you stay sane for organizing and reusing JS, CSS, HTML
  • Using Knockout 3.3.0+ so ready for Knockout's flavor of web component and custom tags (http://knockoutjs.com/documentation/component-overview.html)
  • All documentation are in the major dependencies' own homepages, so that you don't need to completely learn a new framework
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top