_ _ _ _ _
_ (_) | _ (_) | | (_) _
_| |_ _| |_| |_ _____ _ _____ __| |_____ _ _| |_ _____
(_ _) | (_ _|_____) (____ |/ _ | ___ | (_ _) ___ |
| |_| | | | |_ | / ___ ( (_| | ____| | | |_| ____|
\__)_|\_) \__) _| \_____|\____|_____)_| \__)_____)
(__/
Tilt extension for Jadeite that adds support for rendering Jade templates from Sinatra with help from The Ruby Racer embedded V8 JavaScript interpreter.
get "/bacon" do
jade "p Everyone loves #{what[~~(Math.random()*(what.length-1))]} bacon!", :locals => {
:what => ['smoked', 'tasty', 'delicious', 'chunky']
}
end
=> <p>Everyone loves chunky bacon!</p>
### Sinatra example
#### mytemplate.jade
doctype 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript')
if (foo) {
bar()
}
body
h1 Jade - node template engine
#container
if youAreUsingJade
p You are amazing
else
p Get on it!
#### app.rb
require "tilt-jadeite/sinatra"
class HelloWorld < Sinatra::Base
helpers Sinatra::Jade
get "/jade" do
jade :mytemplate, :locals => {:pageTitle => "Jade", :youAreUsingJade => true}
end
end
Accessing your app at /jade will now produce
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar()
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container">
<p>You are amazing</p>
</div>
</body>
</html>
## Rendering server side with Sinatra
The goal of this library is to be able to use the same templates for rendering on server and in browser. Thus, it makes
little sense to include support for using Sinatra helper methods in the templates. Therefore, only the locals hash are
passed to the template engine. The keys of this hash will be the only variables/functions exposed to templates.
If you still wish to expose helper methods from the Sinatra class to your templates, you can do this by adding the desired keys to the locals hash, enclosing methods in anonymous procs/lambdas.
As this example illustrates:
get "/" do
jade :index, :locals => {
:stylesheet_path => proc {|_ignore, path| stylesheet_path(path) }
}
end
Now, the stylesheet_path function is available in the template:
doctype 5
html
head
link(href=stylesheet_path('app'), rel="stylesheet", type="text/css")
link(href=stylesheet_path('mobile'), rel="stylesheet", type="text/css", media='screen and (min-width: 481px)')
// (...)
Remember that Jade is JavaScript, so the procs are converted to functions and thus require () after to be invoked.
You can even expose the haml render method this way:
get "/crazy" do
jade "!= haml('%p Mad crazy!')", :locals => { :haml => proc {|_ignore, tmpl| haml(tmpl) } }
end
This will output:
<p>Mad crazy!</p>
Whether this is a good idea is another question! See performance considerations below.
## Performance
The Ruby Racer performs data conversion when passing Ruby objects to the V8 context. This does not come for free
and can quickly result in performance problems if not taken into consideration. The solution is to keep the
locals hash as small and lightweight as possible. It is a good idea to calculate as much data as possible up front.
I.e. an improved version of the stylesheet_path example above would determine the path to the needed stylesheets before
invoking the template engine:
jade :index, :locals => {
:stylesheets => {
:app => stylesheet_path('app'),
:mobile => stylesheet_path('mobile')
}
}
modifying the jade template to:
link(href=stylesheets.app, rel="stylesheet", type="text/css")
link(href=stylesheets.mobile, rel="stylesheet", type="text/css", media='screen and (min-width: 481px)')
// (...)
## Author
Bjørge Næss / github.com/bjoerge
## Credits
All kudos in the world goes to TJ Holowaychuk for creating the eminent template language Jade and to Charles Lowell for the amazing Ruby Racer.
## LICENSE
MIT