working simple example

README.markdown

@@ -0,0 +1,16 @@
+# simpler pjax
+
+Right now this code is too simple to be useful, except to show how the pjax
+technique works. For instance, it doesn't even check weather history.pushState
+is supported. For a more complete library, check out [Chris Wanstrath's
+jquery-pjax library][pjax].
+
+That said, if you're looking to understand how pjax works just take a look at
+`public/pjaxify.js`. At just 23 non-golfed lines of code, plus some comments,
+it's hopefully easier to follow. I think the pjax technique works best when
+you customize it to the needs of your site. Here I send a title and some
+markup down the wire in JSON, but you could easily imagine sending multiple
+blocks of markup (for different sections of the page) and handling the
+transitions more gracefully (like having a "loading" spinner).
+
+[pjax]: https://github.com/defunkt/jquery-pjax

app.rb

@@ -1,13 +1,32 @@
+require 'json'
+require 'bundler'
+Bundler.require
+
 get('/style.css') { scss :style }
 
+def pjax_render(view)
+  if request.xhr? then
+    headers 'Content-Type' => 'application/json'
+    {
+      :title  => @title,
+      :markup => haml(view, :layout => false)
+    }.to_json
+  else
+    haml view
+  end
+end
+
 get '/' do
-  haml :index
+  @title = 'Home'
+  pjax_render :index
 end
 
 get '/about' do
-  haml :about
+  @title = 'About Us'
+  pjax_render :about
 end
 
 get '/contact' do
-  haml :about
+  @title = 'Contact Information'
+  pjax_render :contact
 end

config.ru

@@ -1,7 +1,3 @@
-require 'bundler'
-
-Bundler.require
-
 require './app'
 
 run Sinatra::Application

public/pjaxify.js

@@ -0,0 +1,39 @@
+(function($) {
+  var $content = $('#content');
+
+  // these functions read and set the live title and markup
+  var getState = function(){
+    return {title: document.title, markup: $content.html()};
+  };
+  var setState = function(data){
+    document.title = data.title;
+    $content.html(data.markup);
+  };
+
+  // this tells jQuery's event handling to recognize
+  // the "state" property of the event
+  $.event.props.push('state');
+  // handle history events, but test for our stored "state"
+  // because some browsers send a useless popstate event
+  // on the first page load
+  $(window).bind('popstate', function(e){
+    e.state && e.state.title && setState(e.state);
+  });
+
+  // instead of loading clicked links as normal, ajax call
+  // them and push their state into the history
+  // (obviously breaks if you have external links)
+  $('a').click(function(e){
+    var href = $(this).attr('href');
+    $.get(href, function(data){
+      setState(data);
+      history.pushState(getState(), '', href);
+    });
+    e.preventDefault();
+  });
+
+  // This ensures that the first page loaded has the same information
+  // stored as the subsequent pages that are loaded through AJAX.
+  history.replaceState(getState(), '');
+
+})(jQuery);

views/layout.haml

@@ -1,7 +1,15 @@
 !!! 5
 %html
   %head
-    %title title
+    %title= @title
     %link{:rel=>:stylesheet,:href=>'/style.css'}
+  %body
+    %nav
+      %a{:href=>'/'} Home
+      %a{:href=>'/about'} About
+      %a{:href=>'/contact'} Contact
+    #content= yield
+    %footer
+      %p= Time.new
+    %script{:src=>'//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js'}
     %script{:src=>'/pjaxify.js'}
-  %body= yield

views/style.scss

@@ -1,4 +1,22 @@
+html {
+  background: #444;
+}
 body {
-  background: #eee;
+  background: #ddd;
   color: #111;
+  width: 600px;
+  padding: 40px;
+  margin: 20px auto;
+}
+nav {
+  overflow: hidden;
+  a {
+    display: block;
+    float: left;
+    margin: 0;
+    padding: 5px 15px;
+    &:hover {
+      background: #fff;
+    }
+  }
 }