"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Plantillas EJS

El motor de plantillas EJS es uno de los más sencillos de usar y depurar, además de ser muy rápido. Está realizado en JavaScript y esta muy aconsejado su uso en combinación de NodeJS y Express.

Veamos como podemos utilizarlo!

Instalación

La manera recomendada de trabajar con él es usarlo como una dependencia de NodeJS en nuestros proyectos, por lo que si tenemos ya Node instalado en nuestros equipos solo tenemos que ejecutar este comando.

npm install ejs

Claro esta podemos usar flags como –save o –save-dev para guardarlo en package.json y de esta manera tenerlo disponible si borramos las dependencias.
Si no queremos usar npm este motor de plantillas es una librería JS así que bastaría con descargarla a mano e importarla pero es más tedioso.

Una vez que la tenemos solo tenemos que llamarla.

Sintaxis

La sintaxis de EJS es muy sencilla y además nos resultará familiar si ya hemos trasteado con otros motores.

  • Control de flujo con  <% %>
  • Pintar valores escapados con  <%= %> (que además es configurable)
  • Pintar valores sin escaparlos con <%- %>, si por ejemplo, dentro metemos una cadena de código html lo imprime tal cual.
  • Newline-trim mode (‘newline slurping’) with -%> ending tag
  • Whitespace-trim mode (slurp all whitespace) for control flow with <%_ _%>
  • Custom delimiters (e.g., use <? ?> instead of <% %>)
  • Puedes usar includes, de esta manera puedes importar otros ficheros ejs (partials) y hacer distintos módulos.
  • Client-side support
  • Static caching of intermediate JavaScript
  • Static caching of templates
  • Complies with the Express view system

Esto es lo que dicen en su documentación, vamos a explicar algunas cosas, si nos fijamos en el primer punto vemos que se habla en primer lugar del control de flujo.

Estas son maneras de controlar el flujo en una plantilla EJS, en primer lugar if/else

<% if (title) { %>
  <h2>Título</h2>
<% } else { %>
  <h2>No hay título</h2>
<% } %>

También podemos utilizar el bucle for o el iterador forEach, no penseis que forman parte de la plantilla, simplemente es JavaScript y aquí podemos utilizar todos los métodos para controlar el flujo presentes en ese lenguaje, además como se trata de Node ya estamos usando características de ES6

<% posts.forEach((post) => { %>
  <a href="/post/<%= post.id %>">
    <h4><%= post.title %></h4>
    <p><%= post.author %></p>
  </a>
<% }) %>

En el ejemplo anterior se usó el forEach nativo de Javascript y una Arrow Function de ES6.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)