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