Skip to content

Instantly share code, notes, and snippets.

@taiju

taiju/app.pl

Created Apr 14, 2012
Embed
What would you like to do?
minimal pjax sample by Mojolicious::Lite + Backbone.js + jQuery + CoffeeScript + LESS
#!/usr/bin/env perl
use Mojolicious::Lite;
app->types->type(coffee => 'text/coffeescript; charset=utf-8');
under sub {
my $self = shift;
my $is_pjax = $self->param('_pjax') ? 1 : 0;
$self->layout('default') unless $self->req->is_xhr || $is_pjax;
1;
};
get '/' => 'index';
get '/:page' => sub {
my $self = shift;
$self->render($self->param('page'));
};
app->start;
__DATA__
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet/less" type="text/css" href="/app.less?_pjax=true" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.0/less-1.3.0.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.1/coffee-script.min.js" type="text/javascript"></script>
<script src="/app.coffee?_pjax=true" type="text/coffeescript"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1><a href="/">greeting</a></h1>
<p>pjax is great!!</p>
</header>
<nav>
<ul>
<li><a href="/">welcome</a></li>
<li><a href="/goodmorning">goodmorning</a></li>
<li><a href="/hello">hello</a></li>
<li><a href="/goodnight">goodnight</a></li>
</ul>
</nav>
<div id="greeting">
<p><%= content %></p>
</div>
</body>
</html>
@@ index.html.ep
% title 'welcome | greeting';
<strong>welcome!!</strong>
@@ goodmorning.html.ep
% title 'goodmorning | greeting';
<strong>goodmorning!!</strong>
@@ hello.html.ep
% title 'hello | greeting';
<strong>hello!!</strong>
@@ goodnight.html.ep
% title 'goodnight | greeting';
<strong>goodnight!!</strong>
@@ app.coffee.ep
$ ->
$greeting = $('#greeting > p')
Router = Backbone.Router.extend
routes:
'': 'index'
':page': 'page'
index: -> $greeting.fadeOut(50, -> $(@).load('/?_pjax=true').fadeIn(500))
page: (page) -> $greeting.fadeOut(50, -> $(@).load("/#{page}?_pjax=true").fadeIn(500))
router = new Router
Backbone.history.start pushState: true
$('a').click (e) ->
router.navigate $(@).attr('href').replace(/^\//, ''), true
e.preventDefault()
@@ app.less.ep
.middle-contrast {
color: #fff;
background-color: #222;
}
.high-contrast {
background-color: #fff;
color: #000;
}
body {
font-size: 16px;
font-family: 'Helvetica', 'Arial', sans-self;
margin: 0 auto;
padding: 5em 20em;
.middle-contrast;
}
h1 {
margin: 0;
font-size: 600%;
letter-spacing: 0.03em;
text-shadow: 2px 3px 5px #000, -2px 0px 5px #000;
}
p {
margin: 2em 0;
}
a {
text-decoration: none;
color: #fff;
}
nav {
padding: 0.5em 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
list-style-type: none;
margin-right: 1em;
a {
display: block;
padding: 0.5em;
&:hover {
text-decoration: underline;
}
}
}
}
#greeting {
margin: 3em 0 0;
padding: 3em;
text-align: center;
.high-contrast;
strong {
font-size: 300%;
letter-spacing: -0.08em;
text-shadow: 1px 0px 3px rgba(0, 0, 0, 0.5),
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.