express-jade
Express middleware to compile client-side Jade templates as template functions in the window.jade
namespace.
Here is a quick flow of how it works (see the full Example below):
- Your template located at
./views/users/show.jade
is loaded from<script src="/js/templates/users/show.js"></script>
- You render the template using
jade['user/show'](locals)
, whereaslocals
is an object (e.g.var locals = { name: 'Nifty', desc: 'Lettuce' };
) - Inject the newly rendered HTML from this Jade template into your web page.
This module was created namely for use with Eskimo
Install
npm install -S express-jade
Usage
This middleware should only be used for development mode. For production, use gulp or grunt to pre-compile jade to the assets (public) directory.
Simply require
the middleware and invoke it with a path to the jade template directory.
You can also pass a custom namespace
as the second argument, and an object of Jade options as the third.
var expressJade = ; var viewsDir = path;var namespace = 'jade';var jadeOptions = pretty: true ; // ... app; // ...
Example
This example is also found in the
./example
folder.
index.html
:
express-jade <!-- The content of this div will change upon page load --> Loading user <!-- Include the Jade runtime for rendering templates --> <!-- Note: Use `bower install -S jade` if you're using Bower --> <!-- Simply load the script and it will inject the template to window namespace --> <!-- Very basic usage showing directory traversal as well -->
views/user/show.jade
:
h1= user.namep= user.desc
app.js
:
var express = ;var expressJade = ;var serveStatic = ;var path = ;var app = ; app; if processenvNODE_ENV !== 'production' var viewsDir = path; var namespace = 'jade'; app; app;
Start the app with node app
and open http://localhost:3000.