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

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>
	<html>
	<head>
	<title>Sammy Forms</title>
	</head>
	<body>
	<nav id="nav">
	<ul>
	<li><a href="#/form">Form</a></li>
	<li><a href="#/redirect">Redirect</a></li>
	<li><a href="#/">Back</a></li>
	</ul>
	</nav>

	<div id="content"></div>

	<script src="Scripts/jquery-1.4.4.js"></script>
	<script src="Scripts/sammy-0.7.4.js"></script>
	<script>
	(function ($) {
	var app = $.sammy('#content', function () {
	this.debug = true;
	var form_fields = null;

	this.get('#/', function () {
	this.app.swap('Click form!');
	});


	this.get('#/redirect', function () {
	this.redirect('#/');
	});


	this.get('#/form', function () {
	this.partial('Files/2-Form.html');
	});


	this.post('#/pretend/post/url', function () {
	form_fields = this.params;
	this.log($.param(form_fields.toHash()));
	this.redirect('#/display');
	});


	this.get('#/display', function () {
	if (form_fields) {
	this.app.swap(form_fields.toHTML());
	} else {
	this.redirect('#/form')
	}
	});
	});

	$(function () {
	app.run('#/');
	});

	})(jQuery);
	</script>
	</body>
	</html>

view raw

spa-sammyFormSample.html

hosted with ❤ by GitHub

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>Roles</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>
	</form>


	<h3>Plain old form</h3>
	<form method="post" action="/i_should_submit">
	<p><input type="submit" value="Dont press me!" /></p>
	</form>