0

Estoy haciendo un render recursivo y bastante simple de esta forma en express

// index.js
const VIEWS = __dirname + '/app/views/';

app.get('/', function (req, res) {
    res.render(VIEWS + 'includes/partials/body', {layout: VIEWS + 'dashboard/home'});
});

Ahora bien, mi archivo app/views/includes/partials/body.ejs es el siguiente

<!-- Start body and layout -->
<% include header %> <!-- Esto carga correctamente -->
<div class="container">
    <% include(layout) %>
    <!-- layout es una variable con valor app/views/dashboard/home -->
    <!-- como se puede ver arriba en mi res.render() -->
</div>
<% include footer %> <!-- Esto carga correctamente -->
<!-- End body and layout -->

Este es mi archivo app/views/dashboard/home.ejs

<h1>Home</h1>

Por más que cambie el contenido de app/views/dashboard/home o le de otro valor a la variable layout por otra ruta con otro archivo y otro html diferente SIEMPRE me da como resultado esto:

<!-- Start header -->
<!DOCTYPE HTML>
<html>
<head>
    <title>yT</title>
    <link rel="stylesheet" href="./public/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/css/style.css">
</head>

<body>
    <br />
    <div class="container">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                    <a class="navbar-brand" href="#">yT</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul id="supertabs" class="nav navbar-nav" data-tabs="supertabs">
                        <li><a href="#y" data-toggle="tab">y</a></li>
                        <li><a href="#T" data-toggle="tab">T</a></li>
                        <li><a href="#c" data-toggle="tab">c</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
<!-- End header -->
<!-- Start body and layout -->
<div class="container">
    <!-- Aquí debería renderizarse un <h1>Home</h1> -->
    <!-- Pero nunca lo hace :C -->
</div>
<!-- End body and layout -->
<!-- Start footer -->
    <script src="./public/jquery/dist/jquery.min.js"></script>
    <script src="./public/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./public/socket.io/socket.io.js"></script>
    <script src="./private/js/app.js"></script>
</body>
</html>
<!-- End footer -->

Es decir que include(layout) NUNCA me renderiza lo que hay dentro de dicho archivo en dicha ruta, ¿Cómo puedo solucionar esto?

8
  • La verdad lo instalé con un simple npm i --save ejs ese es el que estoy usando, ahora estoy del móvil, mañana temprano reviso tus links
    – Jorius
    Commented el 15 mar. 2017 a las 2:59
  • @Jorious, ya estoy de vuelta. Dime, ¿te aseguras que layout tenga un valor válido? Puede ser que por algún motivo no lo tenga. Otra cosa, ¿En la consola no ves ningún warning?
    – gugadev
    Commented el 15 mar. 2017 a las 13:47
  • @GustavoGarcía Si, estoy completamente seguro que layout tiene un valor válido y no, no aparece ningún error ni ningún warning
    – Jorius
    Commented el 15 mar. 2017 a las 14:16
  • En lugar de cargar el layout, imprime en un h1 el valor de layout para ver la ruta.
    – gugadev
    Commented el 15 mar. 2017 a las 14:20
  • 1
    @GustavoGarcía Ya publiqué mi respuesta por si te es útil
    – Jorius
    Commented el 15 mar. 2017 a las 14:42

1 respuesta 1

1

Lo resolví leyendo aquí la documentación en github en el apartado de Tags.

Agregando un guión ( - ) donde realizo el include(layout) se emite el valor de la variable layout sin escapar y así correctamente carga el archivo .ejs:

<!-- Start body and layout -->
<%- include('header') %> 
<!-- 
Esto lo cambie para un mejor uso del motor
y le agregué un guión ( - ) después de la <% para 
"emitir el valor sin escape en la plantilla"
-->
<div class="container">
    <%- include(layout) %> <!-- Al igual que aquí le agrego el guión ( - ) -->
</div>
<%- include('footer') %> <!-- Al igual que cambié esto para lo primeramente mencionado --> 
<!-- End body and layout -->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.