packery-pjax.rb

require 'sinatra'
require 'slim'

get '/' do
  @n = 10
  slim :items
end

get '/:n' do
  @n = params[:n]
  slim :items, :layout => !request.pjax? # don't serve layouts to ajax requests
end

class Sinatra::Request
  def pjax?
    env['HTTP_X_PJAX'] || self["_pjax"]
  end
end

__END__

@@ items
/ replaces `==yield` in layout, served to ajax
- for n in ([email protected]_i)
  .item = n

@@ layout
/ served one time

doctype html
html
  head
    style
      | .gutter-sizer { width: 5%; height: 5%; }
      | #container { width: 50%; min-height: 200px; background-color: #0000ff; }
      | .item { width: 30%; height: 50px; background-color: #ff0000;}

  body
    a href="https://gist.github.com/amonks/61f188df09dd53cefa5c" Source Gist

    / links trigger ajax requests for 5-10 new .items
    / 1. link clicked; 2. pjax:start; 3. contents of `#container` replaced 4. pjax:end
    - for n in (5..10)
      p
        a href="/#{n}" = n

    #container
      .gutter-sizer
      #pjax
        / `yield` is replaced by `items` view
        == yield

script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"
script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.2/jquery.pjax.min.js"
script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/packery/1.1.2/packery.pkgd.min.js"
javascript:
   // initialize packery
   var $container = $('#container')
   $container.packery({
     itemSelector: '.item',
     gutter: ".gutter-sizer",
   });

   // initialize pjax
   $(document).pjax('a', '#pjax');

   // called before each ajax request
   $(document).on('pjax:start', function() {
     $container.packery( 'remove', $container.packery('getItemElements') ).packery();
   })

   // called after each ajax request
   $(document).on('pjax:end', function() {
     $container.packery('appended', $('.item') );
   });