Single Page Apps – Single Page Forms Using the Sammy’s EventContext

image[4]Let’s expand on the previous post Single Page Apps – Getting Started with SammyJS – Routes and create a form using Sammy.js. Instead of adding HTML inline, we can use an external template. And because the data for the input form is contained on a single page, we can display the data on what appears to the user to be another page, after the user submits the form.

Sammy.js helps you create RESTful evented JavaScript single page applications. You can maintain the state of your app with the URL without having to refresh or change the page.

This topic introduces how you can use Sammy.EventContext object. The Sammy.EventContext is created every time a route is run or a bound event is triggered. The callbacks for these events are evaluated within a Sammy.EventContext.

  • partial (location, data, callback, partials) Gets a partial HTML page from a file, takes the data (if any) and pass it to the partial page, and then swap out the app’s element with the rendered content.
  • render (location, data, callback, partials)  Is like the partial, except it does not swap out the page. You attach the rendered item in the DOM.
  • redirect () Changes the current window to the new location. If the redirect includes a hash, then it only changes the same page’s URL with the hash.
  • load ( location, options, callback ) create a new Sammy.RenderContext calling load() with location and options. Called without interpolation or placement, this allows for preloading/caching the templates or data.

Sammy Form Sample

The following sample, written by Aaron Quint, shows an implementation of a form. It loads a form using Sammy’s partial() method. During the post, it saves the data into the form_fields var that is inside your app object. Then completes the post by redirect() to the display hash where the form_fields var is displayed.

<!DOCTYPE html>
<title>Sammy Forms</title>
<nav id="nav">
<li><a href="#/form">Form</a></li>
<li><a href="#/redirect">Redirect</a></li>
<li><a href="#/">Back</a></li>
<div id="content"></div>
<script src="Scripts/jquery-1.4.4.js"></script>
<script src="Scripts/sammy-0.7.4.js"></script>
(function ($) {
var app = $.sammy('#content', function () {
this.debug = true;
var form_fields = null;
this.get('#/', function () {'Click form!');
this.get('#/redirect', function () {
this.get('#/form', function () {
});'#/pretend/post/url', function () {
form_fields = this.params;
this.get('#/display', function () {
if (form_fields) {;
} else {
$(function () {'#/');

The sample uses the following form template named 2-Form.html in the Files folder.

<form action="#/pretend/post/url" method="post">
<p><label for="name">Name</label>
<input type="text" name="name" /></p>
<p><label for="email">Email</label>
<input type="text" name="email" /></p>
<p><label for="role_admin">Admin</label>
<input type="checkbox" name="roles[]" value="admin" id="role_admin"/></p>
<p><label for="role_author">Author</label>
<input type="checkbox" name="roles[]" value="author" id="role_author"/></p>
<p><input type="submit" value="Post" /></p>
<h3>Plain old form</h3>
<form method="post" action="/i_should_submit">
<p><input type="submit" value="Dont press me!" /></p>

The section labeled “Plain old form” shows you can submit the post directly back to the server.

Sample Code

Sample code for this post is available on DevDays GitHub:


Sammy.EventContext in Sammy API Documentation

Form Handling in Quirkey (Sammy’s GitHub Examples)