Skip to content

AndersDJohnson/express-views-dom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

express-views-dom

A DOM view engine for Express.

NPM version Dependency Status

Now with layouts support via express-views-dom-layouts!

Installation

via npm:

$ npm install --save express-views-dom

Use

Add to your Express app as an engine for HTML files:

var app = express();

app.engine('html', require('express-views-dom')(app));

Simple use

"views/home.html":

<!doctype html>
<html>
  <head>
    <title><title>
  </head>
  <body></body>
</html>

JavaScript:

app.get('/', function (req, res) {
  res.render('home', {
    render: function (window, done) {
      var doc = window.document;
      doc.title = "Home";
      doc.body.innerHTML = "Welcome!";
      done();
    }
  });
});

Results in:

<!doctype html>
<html>
  <head>
    <title>Home<title>
  </head>
  <body>
    Welcome!
  </body>
</html>

Loading scripts

Supports loading dependent scripts into the DOM before rendering. Scripts can be specified in the deps array. Each entry must have either a module property to include the main script of an NPM module, or otherwise a file property specifying a script file path. The exports property names a global variable to inject as an argument into the render callback. Scripts are loaded and injected in the order they are listed.

res.render('home', {
  deps: [
    {
      module: 'jquery',
      exports: 'jQuery'
    },
    {
      file: pathToYourScript,
      exports: 'yourGlobalVariable'
    },
    {
      file: someOtherScript
    }
  ],
  render: function (window, $, yourScript, done) {
    $('title').text('Home');
    done();
  }
});

Requesting a different view

You can request rendering of another view by calling the done callback with a second argument specifying the name of the other view. This will spawn a new DOM environment for the HTML of the other view, then re-call your render function on it. The last argument to render is a shared object so you can pass data to the new call.

Here is an example of a basic layout system (if you're serious, consider express-views-dom-layouts):

"views/home.html":

<!doctype html>
<html>
  <body>
    <!-- from the home view -->
    Welcome!
  </body>
</html>

"views/layout.html":

<!doctype html>
<html>
  <head>
    <!-- from the layout view -->
    <style> body { background: skyblue; } </style>
  </head>
  <body></body>
</html>

JavaScript:

res.render('home', {
  render: function (window, done, params) {
    var doc = window.document;
    if (params.hasOwnProperty('myBody')) {
      doc.body.innerHTML = params.myBody;
      done();
    }
    else {
      params.myBody = doc.body.innerHTML;
      done(null, 'layout');
    }
  }
});

Results in:

<!doctype html>
<html>
  <head>
    <!-- from the layout view -->
    <style> body { background: skyblue; } </style>
  </head>
  <body>
    <!-- from the home view -->
    Welcome!
  </body>
</html>

About

A DOM view engine for Express.

Resources

License

Stars

Watchers

Forks

Packages

No packages published