Acceder a la solicitud actual en la vista Express/Jade

Tengo un diseño Vista de jade que tiene un menú por lista desordenada, y quiero configurar <li> para que sea <li class="active">...</li> cuando la página actual se representa en el navegador.Acceder a la solicitud actual en la vista Express/Jade

supongo que tendrá que acceder a la petición actual para determinar cuándo debe establecer el atributo en el <li>

No puedo encontrar ningún ejemplo de cómo hacer esto por lo que la esperanza de que alguien pueda ayudar

Gracias

Fuente

2012-10-04 Jon

probar este antes de su llamada res.render() en la ruta:

res.locals.path = req.path; 
res.render('/page');

res.render('/page', { path: req.path });

entonces habría que hacer una un montón de sentencias if/else en su vista (como sugiere la solución anterior).

- if(currentUrl === '/') 
    li(class='active') 
     a(href='/') Current Driver Standings 
- else 
    li 
     a(href='/') Current Driver Standings

que sin embargo, prefiere hacerlo en el lado del cliente en lugar, para mantener los archivos libres de tanta lógica como sea posible mi plantilla:

En el archivo de plantilla de página (esto es ejs, no está seguro de cómo se hacen eco en jade):

<body data-path="<%= path %>">

continuación con jQuery se puede agarrar la trayectoria del cuerpo y adjuntar una clase activa:

$(function(){ 
    var path = $('body').attr('data-path'); 
    $('nav li a[href='+path+']').parents('li').addClass('active'); 
});

Actualización: También se puede simplemente usar var path = window.location.pathname en lugar de guardarlo a un atributo de body

//no need to save path to <body> tag first: 

$(function(){ 
    var path = window.location.pathname; 
    $('nav li a[href='+path+']').parents('li').addClass('active'); 
});

Fuente

2012-10-04 20:26:38 chovy

Lo único que diría al respecto, es que confía en que el usuario tenga JS (lo cual no es una gran preocupación en estos días) pero puede terminar con otras cosas que existen como atributos por algún motivo y un marcado marcado – Jon

También hay un error tipográfico en tu ejemplo? ¿Está disponible req.path en EJS? ¿No debería ser propiedad de su modelo de vista? – Jon

lo siento, en mis rutas hago res.locals.req = req entonces tengo acceso a toda esa información. Pero me acabo de dar cuenta de que también puedes usar window.location.pathname en lugar de guardarlo en la etiqueta del cuerpo. – chovy

Se me ocurrió esto que funciona sin embargo no estoy seguro de si es su mejor práctica. Por favor, hágamelo saber de cualquier manera:

response.render("current/currentSchedule", { 
       title: "Current Race Schedule", 
       currentUrl: req.path, 
      }); 


ul(class='nav nav-list') 
    li(class='nav-header') Current Season 
    - if(currentUrl === '/') 
     li(class='active') 
      a(href='/') Current Driver Standings 
    - else 
     li 
      a(href='/') Current Driver Standings 
    - if(currentUrl === '/constructor-standings') 
     li(class='active') 
      a(href='/constructor-standings') Current Constructor Standings 
    - else 
     li 
      a(href='/constructor-standings') Current Constructor Standings 
    - if(currentUrl === '/current-schedule') 
     li(class='active') 
      a(href='/current-schedule') Current Race Schedule 
    - else 
     li 
      a(href='/current-schedule') Current Race Schedule

Fuente

2012-10-04 20:12:17 Jon

Esto es muy difícil de mantener porque estás repitiendo los nombres de las clases y enlaces varias veces, y es también una gran cantidad de código . Vea mi respuesta de una manera más fácil. También se podría adaptar para trabajar con currentUrl como en tu respuesta, pero a menudo los elementos de navegación principales deberían mantenerse optimizados para las subrutas, lo que no ocurrirá con el método que has usado. –

Aquí está una manera mucho más ordenado de hacerlo, del lado del servidor:

En su routes.js (o donde) definir una matriz de objetos que representan su nav como tales:

var navLinks = [ 
    { label: 'Home', key: 'home', path: '' }, 
    { label: 'About', key: 'about', path: '/about' }, 
    { label: 'Contact', key: 'contact', path: '/contact' } 
]

pasar la variable navLinks a la vista, así como la tecla del elemento que le gustaría hilighted:

res.render('home', { title: 'Welcome!', section: 'home', navLinks: navLinks });

También puede agregar la variable navLinks a app.locals y se ahorrará tener que proporcionar siempre de manera explícita a las vistas.

Luego de jade en su bucle de plantilla a través de la matriz de enlaces y establecer la clase de activos en el que tiene partidos la sección correspondiente clave:

ul(class='nav nav-list') 
    - navLinks.forEach(function(link){ 
    - var isActive = (link.key == section ? 'active' : '') 
    li(class=isActive) 
     a(href=link.path)= link.label 
    - })

Fuente

2012-10-18 15:47:20

Pasar el req.originalUrl en su archivo de rutas. ejemplo: en su /routes/about.js

router.get('/', function(req, res) { 
res.render('about', { 
    url: req.originalUrl 
}); 
});

Entonces, si la condición escribir otro elemento de la plantilla de jade

if(url==='/about-us') 
    li(class='active') 
     a(href='about-us') About Us 
    else 
    li 
     a(href='about-us') About Us

Fuente

2014-08-10 10:09:16

Acceder a la solicitud actual en la vista Express/Jade

Respuesta

Cuestiones relacionadas