Express Templates

app.set('view engine', 'jade');
app.set('views', './templates');

// templates/thoughts.jade
html
  head
    title= title
  body
    h1 Express is... #{descriptor}!

var data = {
  title: 'My views on Express',
  descriptor: 'great'
};
res.render('thoughts', data);

Finally I'll tell you how res.render works!! 1. setup (aside re: app.get, app.set) 2. here's the template file - uses whitespace/nesting - two main ways to inject data: tagname= #{descriptor} 3. Here's how we call it

Express Templates

Consolidate.js
Jade
npm install --save jade

Jade

html
  head
    title Hello World!
  body
    h1 I like Javascript
    p How do I like javascript? Let me count the ways...

<html>

<head>
    <title>Hello World!</title>
</head>

<body>
    <h1>I like Javascript</h1>
    <p>How do I like javascript? Let me count the ways...</p>
</body>

</html>

Classes & IDs

.content
  h1#title I like Javascript
  h2.subitle Yes I do
  p How do I like javascript? Let me count the ways...

<div class="content">
  <h1 id="title">I like Javascript</h1>
  <h2 class="subtitle">yes I do</h2>
  <p>How do I like javascript? let me count the ways...</p>
</div>

Attributes

script(src='/js/main.js')

label Subscribe to our newsletter
  input(
    type='checkbox'
    name='subscribe'
    checked='checked'
  )

<script src="/js/main.js"></script>

<label>Subscribe to our newsletter
  <input type="checkbox" name="subscribe" checked="checked" />
</label>

Injecting Data

// infobox.jade (snippet)
.infobox
  h3= title
  p User "#{username}" has been updated

res.render('infobox', {
  title: "Save Successful",
  username: "Sequoia"
});

<div class="infobox">
  <h3>Save Successful</h3>
  <p>User "Sequoia" has been updated</p>
</div>

Update /restuarants/:id to use templates:

restuarants-router-5.js
tempalates/restuarant.jade

Response:

<html>
<head>
    <title>Amici's</title>
</head>
<body>
  <h1>Restaurant</h1>
  <ul>
      <li>id: 1</li>
      <li>name: Amici's</li>
      <li>founded: 2010</li>
  </ul>
</body>
</html>

...ditto for /restaurants/2, /restaurants/3 etc.

Dynamic Attributes

// infobox.jade
.infobox(class=type)
  h3= title
  p= message

var event = {
  type : "error",
  title: "Save Failed",
  message: "Please log in"
};
res.render('infobox', event);

<div class="infobox error">
    <h3>Save failed</h3>
    <p>403: Please log in</p>
</div>

Dynamic Attributes

var event = {
  type : ["success", "user-action"]
  title: "Success",
  message: "Profile Updated"
};
res.render('infobox', event);

<div class="infobox success user-action">
    <h3>Success</h3>
    <p>Profile Updated</p>
</div>

Conditionals & Iteration

body.userlist
  if !users.length
    p No users!
  else
    ul
      each user in users
        li= user.name

Express Templates app.set('view engine', 'jade'); app.set('views', './templates'); // templates/thoughts.jade html head title= title body h1 Express is... #{descriptor}! var data = { title: 'My views on Express', descriptor: 'great' }; res.render('thoughts', data); Finally I'll tell you how res.render works!! 1. setup (aside re: app.get, app.set) 2. here's the template file - uses whitespace/nesting - two main ways to inject data: tagname= #{descriptor} 3. Here's how we call it