HOWTO: Jade snippets for beginners

jade_code_snippets.md

#Jade Snippets

Useful tools

Brackets -The smartest JavaScript IDE

HTML2JADE Converter

JADE2HTML Converter

Jade Syntax Documentation

Templates

Viele/Layouts/masterhead.jade Inhalt übernehmen und am ende block content In der jadepage oben definieren: Extends/Layouts/masterhead Block content

Configure routes

We create a route for the page 'localhost:1337/errors'

First create in your project_directory the folder 'routes'

Then create 'errors.js' (in the folder 'routes') and type:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
	res.render('errors.jade');
});

module.exports = router;

Then in server.js type:

var express = require('express');
var app = express();

// Routes
var errors = require(__dirname + '/routes/errors');
app.use('/errors', errors);

Now create 'errors.jade' in your project_directory/views

doctype html
html(lang="de")
  head
    meta(charset="UTF-8")
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    title Errors Example Page
  body
    h1 Hello World of errors!

Passing data (e.g. array) from node to jade template

server-side server.js

/* server-side */
var dataArray = [];

/* push some data into the array */
dataArray.push();

/* pass parameters to jade */
res.render("root.jade", {dataArray:dataArray});

client-side in jade (page.jade)

script.
  var dataArray = !{dataArray};
ul
  for item in dataArray
    li= item.name
  else
    li sorry, array has no data!