Plantillas

EJS como lenguaje de plantillas

La función principal de EJS (Embedded Javascript) es procesar datos y agregarlos a páginas web para su presentación:


<%
// Data
const title = 'Payroll'
const header = 'Employees'
const list = [
  {name:'John Doe',     phone:'555-1234', salary: 8750},
  {name:'Jane Collins', phone:'666-1234', salary: 7525},
  {name:'Jim Taylor',   phone:'555-4321', salary: 6450},
  {name:'Jack Black',   phone:'555-9876', salary: 5600}
]
%>
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
  <h1><%= header %></h1>

  <table>
    <tr><th>Id</th><th>Name</th><th>Phone</th><th>Salary</th></tr>
    <% if (list.length > 0) { %>
      <% for(item of list){ %>
        <tr>
          <td><%=item.id%></td>
          <td><a href="/employee/<%=item.id%>"><%=item.name%></a></td>
          <td><%=item.phone%></td>
          <td><%=item.salary%></td>
        </tr>
      <% } %>
    <% } else { %>
        <tr>
          <td colspan="4">Employees not found</td>
        </tr>
    <% } %>
  </table>

</body>
</html>

Delimitadores

Los delimitadores le indican al procesador de plantillas dónde reemplazar las etiquetas por comandos y datos en la página web:


<%  /* Código JavaScript (se ejecuta pero no se muestra) */ %>
<%= /* Expresión JavaScript (el dato se valida para HTML) */ %>
<%- /* Expresión JavaScript (el dato no se valida para HTML) */ %>
<%# /* Comentario (no se incluye en la página) */ %>

Uso de plantillas en Node

La función de Node es procesar solicitudes al servidor, leer información de la base de datos y presentarla en páginas web, y para eso usamos plantillas que nos permiten reemplazar esos datos en sus respectivas posiciones en la página, pero primero debemos instalarlo:


$ npm install ejs

Y luego:


const express = require('express')                      // framework
const ejs = require('ejs')                              // include EJS module
const app = express()                                   // start the app
app.use(express.static(path.join(__dirname, 'public'))) // static files here
app.set('views', path.join(__dirname, 'pages'))         // use pages folder
app.set('view engine', 'html')                          // use HTML templates
app.engine('html', ejs.renderFile)                      // use EJS engine

// List all employees
app.get('/employees', async (req, res)=>{
  const list = await Employees.list()                   // access database
  res.render('employees', { list })                     // process template with data
})

Y el resultado será:

Empleados
Id	Nombre	Teléfono	Salario	Ingreso
1	John Patrick	555-1324	8750.00	2000-01-10
2	Jane Taylor	555-5678	6395.00	2003-08-24
3	Jim Collins	555-9012	4500.00	2001-11-08
4	Kelly Smith	555-3456	3275.00	2008-04-03

Cada vez que los resultados cambien en la base de datos, esos cambios se verán reflejados en la página web a través de la plantilla gracias a EJS

Referencia:

EJS - Embeded Javascipt template engine: https://ejs.co