Thursday, August 26, 2010

Jade Templating

‹prev | My Chain | next›

Last night, I got up and running (quite quickly) express, a Sinatra-like framework for node.js. Tonight, I would like to explore one of the templating systems that express supports—jade, which bills itself as a haml (js) successor.

I install jade with npm:
cstrom@whitefall:~/repos/my_fab_game$ npm install jade
npm it worked if it ends with ok
npm cli [ 'install', 'jade' ]
npm version 0.1.26
...

npm linkBin jade ./bin/jade
npm activate jade@0.3.0
npm build Success: jade@0.3.0
npm ok


In my backend server, I set jade as the default templating engine and set it up to respond to the "/board" resource:
app.set('view engine', 'jade');

app.get('/board', function(req, res) {
res.render('board');
});
If I understand the instructions on the express guide, I can put a board.jade file into the views sub-directory. Also, I need to put a layout.jade file in there because I have not supplied layout: false options.

So I have views/board.jade:
h1 Hello World!
...and views/layout.jade:
!!! 5
html(lang="en")
head
title Testing 123
body
div= body
I think that the result of the views/board.jade template will be inserted into views/board.jade, interpolated into the body variable. Checking it out in the browser, I find:



Hrm... that is not quite right. The results of the board.jade template are being escaped before being inserted into layout.jade. Ah! I simply need to prepend an exclamation mark on the body variable to signal that I do not want to escape the HTML:
!!! 5
html(lang="en")
head
title Testing 123
body
div!= body
With that, I get my nice HTML-ified template:



I take a bit of time to get my old, static HTML converted over to jade in the layout:
!!! 5
html(lang="en")
head
title My (fab) Game

link(href="/stylesheets/board.css", media="screen", rel="stylesheet", type="text/css")

script(src="/javascript/jquery-min.js", type="application/javascript")

script(src="/javascript/json2.js", type="application/javascript")

script(type="text/javascript", src="/faye.js")

script(src="/javascript/raphael-min.js", type="application/javascript")
script(src="/javascript/player.js", type="application/javascript")
script(src="/javascript/player_list.js", type="application/javascript")
script(src="/javascript/room.js", type="application/javascript")

:javascript
| var player_list;

| $(function() {
| var kv = location.search.substr(1).split(/=/);
| if (kv[0] == 'player' && kv[1]) {
| $('#login').hide();

| var me = new Player(kv[1], {animate_with: function(avatar){
| var color = ["#ccc", "#c00", "#0c0"][Math.floor(3*Math.random(3))];
| avatar.attr({fill: color});
| } });

| var room = new Room($("#room-container")[0]);
| var goodbye = function() {
| alert("You have been logged out.");
| window.location = window.location.protocol + '//' + window.location.host + window.location.pathname;
| };
| player_list = new PlayerList(me, room, {onComplete: goodbye});
| }
| });

body
div!= body
...And in the board itself:
form#login(method: "get")
label
Name
input(type: "text", name: "player")
input(type: "submit", value: "Play")
#room-container
With that, I can play my (fab) game with express / jade:



Nice! That is a fine stopping point for tonight. Up tomorrow: it's been far too long since I last played with CouchDB.


Day #207

6 comments:

  1. Thanks for this, there isn't much documentation on jade and your post helped me out.

    ReplyDelete
  2. I second Matt's notion again :D

    ReplyDelete