I’ve been looking at Sammy.JS recently. It’s a lightweight Javascript framework for managing transitions on your page. It extends jQuery. The neat trick it uses is to leverage the anchor part of the URI – that’s the bit after the ‘#’ to provide routes into your javascript. If you’ve used the new routing framework in ASP.NET you’ll understand it straight away.
Here’s a quick example I’ve put together. We’ve got three links with three paragraphs. As you click the links the related paragraph appears.
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
The big deal is that I now have a URI to each paragraph and normal browser functions like the back button work. Go on, you can try it. I can correctly link straight to a particular state of my Ajax application, and you know what a PITA that can be.
Here’s the code for the page:
<html>
<head>
<title>Sammy Test</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="sammy.js" type="text/javascript"></script>
<script src="sammy_test.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>Sammy Test</h1>
<a href="#/one">one</a>
<a href="#/two">two</a>
<a href="#/three">three</a>
</div>
<div id="main">
<p id="one">This is the first paragraph.</p>
<p id="two">This is the second paragraph.</p>
<p id="three">This is the third paragraph.</p>
</div>
</body>
</html>
And here’s the script:
(function($) {
var app = $.sammy('#main', function() {
var hideAll = function() {
$("#one").hide();
$("#two").hide();
$("#three").hide();
};
this.get('#/', function(context) {
hideAll();
});
this.get("#/one", function(context) {
hideAll();
$("#one").show();
});
this.get("#/two", function(context) {
hideAll();
$("#two").show();
});
this.get("#/three", function(context) {
hideAll();
$("#three").show();
});
});
$(function() {
app.run('#/');
});
})(jQuery);
If you are writing even a slightly complicated Ajax application it’s worth checking Sammy out.
Posts
2 comments:
Hey Mike,
Thanks for your post regarding sammy.js. Although it is short, it is actually much more complete than several others I have read.
One question I have, however, goes beyond the simple Hiding/Show of Ajax acquired content. It is this:
In a 'real world' app, clicking a link could reasonably result in bringing an entire new interaction/task context to the user. A context that we would want to fully enable with event watchers, etc. In other words, the type of stuff we would execute at $(document).ready time. (Such as hiding the ajax paragraphs in your example.)
But acquiring the content via sammy.js occurs "post" doc-ready.
Where would we properly place any context initialization stuff?
This is somewhat rhetorical, but if you know of any resources that get into this, please share.
All the best,
- Kevin M.
Kevin, I think this is best handled in Sammy's own introduction to the framework - the JSON store.
Post a Comment