Skip to content
A simple, but surprisingly featureful, hash-based page router for Knockout, wrapped up in demo code
JavaScript HTML CSS
Find file
Latest commit 586d93b Jun 29, 2015 @cstorey cstorey Merge pull request #2 from Yodadude/fix_encoded_path_bug
Fix 404 error when path contains encoded values
Failed to load latest commit information.
src
.gitignore
Gruntfile.js
README.md
package.json

README.md

Knockout Routing Example

A demonstration of how a very simple hash-based router can provide quite a lot of nice page routing functionality:

  • Back and forward work, as does bookmarking, page-refresh, emailing links etc.
  • Regexes for URL matching
  • Extract parts from URL simply by declaring groups in the Regex
  • Filter all requests to intercept as necessary - e.g. for auth
  • Links can be just plain <a href="#foo">Foo</a> with no JS required (but no support for bidirectional routing)
  • 404 page where no match found
  • Common error page shown when current page's error property is set
  • Common loading page shown when current page's loading property is set.

You should be able to simply double click src/index.html to open it in your browser and play with it. The examples are fairly self-explanatory. A Gruntfile with live-reloading demo web server is also provided, which was used whilst developing this example.

The interesting files are:

  • src/scripts/router.js: defines Router and Router.Page
  • src/scripts/main.js: demonstrates how to use the Router, providing a URL mapping that shows off the various features
  • src/index.html: demonstrates how to use Knockout binding so that the Router controls the page content that is shown, with templates inline, including those that the Router expects to exist (404, error, loading).
Something went wrong with that request. Please try again.