Views & Templating Engines
Last updated: 4 - 5 - 2019

Location

Each one of ZinkyJS modules contains its own views. These are put in "views" folder in the module's folder.
Every Zinko(module) retrieves its views into views property with their names(excluding the extension).

Eg:

 // For this module tree:
// moduleName
//   |_ client
//   |_ views
//        |_ index.pug
//   |_ index.js

GET_root(req, res, next) {
  res.render(this.v("index"));
  // Or if you are working in another module.
  res.render(req.app.modules.moduleName.v("index"));
}

Pug

ZinkyJS uses Pug as the default templating engine. It handles it with pug-layout. You can check its complete API, but here, we are interested in only two of its methods: extends(), render().

The pug-layout package allows to read a pug file either as a layout or as a page. So, ZinkyJS made a convention in order to make the decision of in which type would it read views:
If a file name starts with L_ then it's read as a layout, if not, it will be read as a page.

To test it, create this file 'app_modules/home/views/L_main.pug' with this content:

 html
head
  title App
body
  h1
    span Hello
    span= name
  block content

The file we created is a layout.
Let's create now the page that will extend it. Put in 'app_modules/home/views/index.pug' this:

 block content
  h3 This is my page content
  p I love ZinkyJS

At this stage, there is nothing indicating that 'index.pug' extends from 'L_main.pug'.
We'll make this in the home root. So in 'app_modules/home/index.js' replace the content of 'GET_root' by:

 GET_root(req, res) {
  var index = this.v("index");
  index.extend(this.v("L_main")):
  var html = index.render({name: 'Zayd'});
  res.end(html);
}

Visit localhost:3000, and enjoy!

We can even make the same thing with less code:

 GET_root(req, res) {
  res.render(this.v("index"), {name: 'Zayd'}, this.v("L_main"));
  // And don't forget to thank ZinkyJS
}

Other Templating Engines

ZinkyJS is not a dictator! And it doesn't force you to make the same choices it did.
If you're not a big fan of Pug, you still have the choice to work with other templating engines. To do so, you have to set stopPugLayout to true in the Zinky instance, and write a render method that returns the resulting html using the templating engine's API you choosed.

Say that we want to use EJS instead of Pug.
We will have to install EJS and require it in 'app.js', then, set stopPugLayout to true and write the render method that uses EJS API.

So 'app.js' will look like this:

  const Zinky = require('zinky');
 const ejs = require('ejs'); // Don't forget to npm install ejs
 
 var app = new Zinky({
   aliases: {
     '': 'home'
     'customers': 'users'
   },
   stopPugLayout: true,
   render: function(view, data, options) {
     return ejs.render(view, data, options);
     // According to EJS API, render function takes these three parameters
   }
 });

 app.listen();

Let's now, remake our views. Delete 'L_main.pug' and 'index.pug' from 'app_modules/home/views', then create in that folder a file named 'index.ejs' with this content:

  <html>
   <head>
     <title>App</title>
   </head>
   <body>
     <h1> Hello <%= name %></h1>
     <h3>This is my page content </h3>
     <p>I love ZinkyJS</p>
   </body>
 </html>

Now render this in 'app_modules/home/index.js':

 GET_root(req, res) {
  res.render(this.v("index"), {name: 'Zayd'}, {});
  // res.render takes the same parameters as our custom 'render()' method does.
}

Note: For the rest of the tutorials we'll keep working with pug layout.

Next Course: Error Handling