naoya/about.ejs

## about.ejs
<div class="hero-unit">
  <h1>About me</h1>
  <p>...</p>
</div>

## app.coffee
express = require "express"
app = module.exports = express.createServer()

app.configure ->
  app.set "views", __dirname + "/views"
  app.set "view engine", "ejs"
  app.use express.bodyParser()
  app.use express.methodOverride()
  app.use app.router
  app.use express.static __dirname + "/public"

renderPjax = (req, res, view) ->
  res.render view,
    layout: if req.header('X-PJAX') is "true" then false else true
    title: 'Express'

app.get "/", (req, res)        -> renderPjax req, res, 'index'
app.get "/about", (req, res)   -> renderPjax req, res, 'about'
app.get "/contact", (req, res) -> renderPjax req, res, 'contact'

app.listen 3000
console.log "Express server listening on port %d in %s mode", app.address().port, app.settings.env

## contact.ejs
<div class="hero-unit">
  <h1>Contact</h1>
  <p>...</p>
</div>

## frontend.coffee
# -*- mode: coffee; shadow-command: "coffee -csb"; -*-
$(document).ready ->
  $('.js-pjax').click( ->
    $('ul.nav li.active').removeClass 'active'
    $(this).parent('li').addClass 'active'
  ).pjax('#main')

## index.ejs
<div class="hero-unit">
  <h1><%= title %></h1>
  <p>Welcome to <%= title %></p>
</div>

## layout.ejs
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title><%= title %></title>

    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
    <link rel="stylesheet" href="/stylesheets/style.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="/javascripts/jquery.pjax.js"></script>
    <script type="text/javascript" src="/javascripts/frontend.js"></script>
  </head>

  <body>
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="/"><%= title %></a>

          <ul class="nav">
            <li class="active"><a href="/" class="js-pjax">Home</a></li>
            <li><a href="/about" class="js-pjax">About</a></li>
            <li><a href="/contact" class="js-pjax">Contact</a></li>
          </ul>

        </div>
      </div>
    </div>

    <div class="container">
      <div id="main">
        <%- body %>
      </div>
      <footer>
        <p>Naoya Ito</p>
      </footer>
    </div><!-- /container -->

  </body>
</html>
	express = require "express"
	app = module.exports = express.createServer()

	app.configure ->
	app.set "views", __dirname + "/views"
	app.set "view engine", "ejs"
	app.use express.bodyParser()
	app.use express.methodOverride()
	app.use app.router
	app.use express.static __dirname + "/public"

	renderPjax = (req, res, view) ->
	res.render view,
	layout: if req.header('X-PJAX') is "true" then false else true
	title: 'Express'

	app.get "/", (req, res) -> renderPjax req, res, 'index'
	app.get "/about", (req, res) -> renderPjax req, res, 'about'
	app.get "/contact", (req, res) -> renderPjax req, res, 'contact'

	app.listen 3000
	console.log "Express server listening on port %d in %s mode", app.address().port, app.settings.env
	# -- mode: coffee; shadow-command: "coffee -csb"; --
	$(document).ready ->
	$('.js-pjax').click( ->
	$('ul.nav li.active').removeClass 'active'
	$(this).parent('li').addClass 'active'
	).pjax('#main')
	<div class="hero-unit">
	<h1><%= title %></h1>
	<p>Welcome to <%= title %></p>
	</div>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title><%= title %></title>

	<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
	<link rel="stylesheet" href="/stylesheets/style.css" />

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="/javascripts/jquery.pjax.js"></script>
	<script type="text/javascript" src="/javascripts/frontend.js"></script>
	</head>

	<body>
	<div class="topbar">
	<div class="fill">
	<div class="container">
	<a class="brand" href="/"><%= title %></a>

	<ul class="nav">
	<li class="active"><a href="/" class="js-pjax">Home</a></li>
	<li><a href="/about" class="js-pjax">About</a></li>
	<li><a href="/contact" class="js-pjax">Contact</a></li>
	</ul>

	</div>
	</div>
	</div>

	<div class="container">
	<div id="main">
	<%- body %>
	</div>
	<footer>
	<p>Naoya Ito</p>
	</footer>
	</div><!-- /container -->

	</body>
	</html>