trascender.render v0.0.1
TRASCENDER.RENDER
Motor de plantillas para ExpressJS usando html puro
OPINION DEL AUTOR
El uso de un motor de plantillas hoy en día no es tan popular como hace algunos años. El uso de ajax y otros motores de plantilla desplazaron el HTML a segundo plano. Aún así, siempre es necesario contar con algo simple y robusto sin aprender más de lo que ya sabemos. HTML sigue siendo lo que ves en el front, por ende, que mejor que usar un motor de plantillas basado en este arcaico lenguaje.
INSTALAR
$ npm install trascender.render
IMPORTAR
const render = require("trascender.render");
INSTANCIAR
this.express = express(); //tipico en app express
new render(this, __dirname + "/frontend/");//carpeta con vistas html
EJEMPLO DE USO
this.express.get("/",function(req,res){
res.render("index",{
title: "Hola mundo",
p: "El motor de plantillas trascender.render esta funcionando perfectamente",
a: "https://www.jotace.cl",
if: true,
repeat: [1,2,3,4,5]
});
});
CONTROL USE
Para utilizar una plantilla maestra deberá seguir el siguiente formato:
index.html
<!--use:main-->
CONTROL DEFINE
Dentro del html maestro existirán las definiciones, secciones que podrán ser reemplazadas por quienes utilicen dicha plantilla:
main.html
<!--define:title-->
<!--define:nav-->
<!--define:main-->
<!--define:footer-->
Para que una vista reemplace su contenido deberá seguir el siguiente formato
index.html
<!--define:title-->
Hello, world!
<!--/define:title-->
<!--define:main-->
<h1>Hello, world!</h1>
<!--/define:main-->
CONTROL INCLUDE
Para incluir secciones externas y segregar aún más nuestras vistas, puedes utilizar el control include de la siguiente manera:
main.html
<!--include:nav-->
<!--include:footer-->
CONTROL DATA
Para renderizar un dato como un texto deberás seguir el siguiente formato:
index.html
<h1>{{data:doc.title}}</h1>
<!--
entre {{}} debe ir data:
seguido del objeto al cual quieres acceder, en este caso, doc.title
-->
CONTROL IF
Para renderizar contenido de manera condicional, es decir, si cumple o no una función x, deberás seguir el siguiente formato:
index.html
<!--if:doc.if===true-->
<h2>Este parrafo se muestra solo si el campo if del objeto es verdadero</h2>
<!--/if-->
CONTROL REPEAT
Por último tenemos el control repeat el cual se repetirá en base a un arreglo de información. Debes seguir el siguiente formato:
index.html
<!--repeat:doc.fieldarray-->
<p>{{data:doc.fieldarray[index]}}</p>
<!--/repeat:doc.fieldarray-->
Si todo va bien, el sistema se levantará utilizando el motor de vistas. Si agregas nodemon, agilizarás aún más el proceso de desarrollo. Suerte y buenos códigos ;)
Cualquier comentario favor informar
License
MIT
Free Software, Hell Yeah!
4 years ago