node.js - hbs - pug node js example
Motor Razor view para ExpressJS (4)
He estado jugando con NodeJS, ExpressJS, etc., y me gustaría poder tener un motor de plantillas más cercano al motor Razor de ASP.Net MVC para el nodo (jshtml). Tengo curiosidad si alguien está familiarizado con tal bestia, o algo más cercano a ella.
La característica principal que deseo es insertar regiones / secciones en función de un diseño / plantilla maestro / principal, que no parece ser una característica en los motores de plantillas para el nodo que he visto hasta ahora.
- editar: 2012-02-09 -
Básicamente quiero poder hacer lo siguiente ...
_layout.jshtml
<!DOCTYPE html>
<html>
<head>
<!-- meta tags, etc -->
<!-- title set in page -->
<title>@ViewBag.Title</title>
<!-- site-wide styles -->
@RenderSection("Styles", false)
</head>
<body class="@ViewBag.PageClass">
<!-- site-wide header -->
<div id="side_content">
@RenderSection("Side", false)
</div>
<div id="main_content">
@RenderBody()
</div>
<!-- site-wide footer -->
<!-- site-wide scripts -->
@RenderSection("Scripts", false)
</body>
</html>
mypage.jshtml
@{
ViewBag.Title = "My Page";
ViewBag.PageClass = "page-x";
}
@section Styles {
<link ... />
}
@section Scripts {
<script type="text/javascript">
var pagesettings = @Html.Raw(Model.SomeJsonContentFromController);
</script>
}
@section Side {
side content here
}
main content here
Que es pasar ciertos criterios de la vista al diseño que incluye varias secciones. No he visto un ejemplo de cómo hacer esto en Jade o EJS; si es posible, agradecería la información.
- editar: 2012-02-13 -
Parece que ExpressJS 3 + Jade ahora hay palabras clave "extender" y "bloquear" para definir con precisión lo que estaba buscando. Ejemplo tomado de aquí . Gracias a @Don por su respuesta y comentario.
// my-template.jade
extends my-layout
// only guessing this var will be passed to the layout (testing later)
- var pageTitle = "My Template";
- var pageClass = "my-template";
block styles
style(type="text/css")
block scripts
script(src="myscript.js")
block side
div Side Content Here
block main
div Main Content Here
//my-layout.jade
doctype 5
html
head
title #{pageTitle} - My Site
body(class=pageClass)
#side
block side
#main
block main
block scripts
No estoy 100% seguro de algunos aspectos anteriores (es decir, las variables que llevan al diseño desde la plantilla ... intentaré confirmar más adelante).
Estaba a punto de echar un vistazo a Bliss, cuando me encontré con JSHTML, que parece ser compatible con Express JS.
Me encontré con el motor de plantillas de Bliss . Utiliza una sintaxis de navaja casi exacta. Puede que tenga que hacer un trabajo mínimo para integrarlo limpiamente en express.
No he encontrado un motor de vista de nodo que replique la sintaxis de Razor, que es bastante agradable, pero muy exclusivo de .Net. Puede ser un buen proyecto para comenzar en Github.
Para soporte parcial, verifique los parciales en EJS o las importaciones en Jade. No es un análogo total de lo que estás buscando, pero harán el trabajo. Mi opinión personal, profundizar en Jade; cuanto más lo uses, más te encantará.
Vash es la característica más completa y actualizada que encontré hasta ahora. Definitivamente verifica uno.