MVC example: EJS -> Jade.

examples/mvc/controllers/pet/index.js

@@ -4,8 +4,6 @@
 
 var db = require('../../db');
 
-exports.engine = 'jade';
-
 exports.before = function(req, res, next){
   var pet = db.pets[req.params.pet_id];
   if (!pet) return next(new Error('Pet not found'));

examples/mvc/controllers/user/views/edit.html

@@ -1,12 +0,0 @@
-<link rel="stylesheet" href="/style.css" />
-<h1><%= user.name %></h1>
-<form action='/user/<%= user.id %>' method='post'>
-  <input type="hidden" name="_method" value="put" />
-  <label>Name: <input type="text" name="user[name]" value="<%= user.name %>" /></label>
-  <input type="submit" value="Update" />
-</form>
-
-<form action='/user/<%= user.id %>/pet' method='post'>
-  <label>Pet: <input type="text" name="pet[name]" placeholder="name" /></label>
-  <input type="submit" value="Add" />
-</form>

examples/mvc/controllers/user/views/edit.jade

@@ -0,0 +1,12 @@
+link(rel='stylesheet', href='/style.css')
+h1= user.name
+form(action='/user/#{user.id}', method='post')
+  input(type='hidden', name='_method', value='put')
+  label= 'Name: '
+    input(type='text', name='user[name]', value='#{user.name}')
+  input(type='submit', value='Update')
+
+form(action='/user/#{user.id}/pet', method='post')
+  label= 'Pet: '
+    input(type='text', name='pet[name]', placeholder='Name')
+  input(type='submit', value='Add')

examples/mvc/controllers/user/views/list.html

@@ -1,8 +0,0 @@
-<link rel="stylesheet" href="/style.css" />
-<h1>Users</h1>
-<p>Click a user below to view their pets.</p>
-<ul>
-  <% users.forEach(function(user){ %>
-    <li><a href="/user/<%= user.id %>"><%= user.name %></a></li>
-  <% }) %>
-</ul>

examples/mvc/controllers/user/views/list.jade

@@ -0,0 +1,7 @@
+link(rel='stylesheet', href='/style.css')
+h1 Users
+p Click a user below to view their pets.
+ul
+  each user in users
+    li
+      a(href='/user/#{user.id}')= user.name

examples/mvc/controllers/user/views/show.html

@@ -1,21 +0,0 @@
-<link rel="stylesheet" href="/style.css" />
-<h1><%= user.name %> <a href="/user/<%= user.id %>/edit">edit</a></h1>
-
-<% if (hasMessages) { %>
-  <ul id="messages">
-    <% messages.forEach(function(msg){ %>
-      <li><%= msg %></li>
-    <% }) %>
-  </ul>
-<% } %>
-
-<% if (user.pets.length) { %>
-  <p>View <%= user.name %>s pets:</p>
-  <ul>
-    <% user.pets.forEach(function(pet){ %>
-      <li><a href="/pet/<%= pet.id %>"><%= pet.name %></a></li>
-    <% }) %>
-  </ul>
-<% } else { %>
-  <p>No pets!</p>
-<% } %>

examples/mvc/controllers/user/views/show.jade

@@ -0,0 +1,17 @@
+link(rel='stylesheet', href='/style.css')
+h1= user.name + ' '
+  a(href='/user/#{user.id}/edit') edit
+
+if (hasMessages)
+  ul#messages
+    each msg in messages
+      li= msg
+
+if (user.pets.length)
+  p View #{user.name}'s pets:
+  ul
+    each pet in user.pets
+      li
+        a(href='/pet/#{pet.id}')= pet.name
+else
+  p No pets!

examples/mvc/index.js

@@ -13,11 +13,9 @@ var app = module.exports = express();
 
 // settings
 
-// map .renderFile to ".html" files
-app.engine('html', require('ejs').renderFile);
-
-// make ".html" the default
-app.set('view engine', 'html');
+// set our default template engine to "jade"
+// which prevents the need for extensions
+app.set('view engine', 'jade');
 
 // set views for error and 404 pages
 app.set('views', __dirname + '/views');

examples/mvc/views/404.html

@@ -1,3 +0,0 @@
-<link rel="stylesheet" href="/style.css" />
-<h1>404: Not Found</h1>
-<p>Sorry we can't find <%= url %></p>

examples/mvc/views/404.jade

@@ -0,0 +1,3 @@
+link(rel='stylesheet', href='/style.css')
+h1 404: Not Found
+p Sorry we can't find #{url}

examples/mvc/views/5xx.html

@@ -1,3 +0,0 @@
-<link rel="stylesheet" href="/style.css" />
-<h1>500: Internal Server Error</h1>
-<p>Looks like something blew up!</p>

examples/mvc/views/5xx.jade

@@ -0,0 +1,3 @@
+link(rel='stylesheet', href='/style.css')
+h1 500: Internal Server Error
+p Looks like something blew up!