I recently started working with SammyJS in my investment tracking web app and thought
others might get some value out of a blog post on the topic. I had already developed a basic app API and ASP.NET website,
but wanted to add support for the Single Page App (SPA) model to facilitate mobile access.

At its core, SammyJS is a JavaScript framework which provides an event and routing subsystem for web apps using
jQuery, AJAX, and desiring a structured client-side design. This fit my need and has integrated well so far.

Obviously, the first thing I needed to do was download the sammy.js JavaScript and save it to my project's js folder.
Alternatively, I could reference the file from a CDN. Although neither the
Microsoft ASP.NET CDN nor
Google CDN host Sammy yet, CloudFare has a large
library of JavaScript, etc hosted by their CDNJS project - including Sammy!

//cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.4/sammy.min.js

Sammy is compatible with and uses jQuery, so if you haven't already, you'll need to include a reference to jQuery (v1.4.1 or above) also (be sure to add the reference to jQuery above Sammy).

Inside the sammy-app.js goes our single page routing logic. I prefer to use the module pattern for my variables (thanks to Eric Miraglia (@miraglia), for this!),
so first you see the "MyGlobalVar" definition. This is not required by Sammy, but I think it is useful so I
have retained it here. Also, within the Sammy instantiation, you'll find my reference to Mustache which tells Sammy to fetch and use the Mustache engine for templates.

How does Sammy know where to insert changes into the DOM? When instantiating the Sammy instance, I've specified "#sammyMain" as a parameter. This parameter
tells Sammy what node in the DOM is the outer node of it's primary update region.

MyGlobalVar.SammyApp = $.sammy('#sammyMain', function () {

In this case my ASP.NET ASPX page is very small. It includes
the SCRIPT tags previously mentioned, along with a DIV tag with the "#sammyMain" id, all wrapped in the ASP.NET Content node.

Moving along, I tell Sammy about my "root" route in the call to the get method and specify the handler for the associated event.
This get method/handler pattern can be repeated for any number of additional routes you might need.

// Root - Main 'homepage' of SPAthis.get('#/', function (context) {

First, I log to help with debugging, then call Sammy's swap method. This isn't important at first, but when you have more than one route,
and your user returns to the "root" route, the swap call ensures the content is cleared before new content is rendered. The next line of code
brings in the Mustache template for my main grid. For the most part, this Mustache template is just a placeholder for the results of the
row template that comes a couple of lines later.