web-dev-qa-db-fra.com

Accéder à la demande actuelle en mode Express/Jade

J'ai une mise en page Jade comportant un menu via une liste non ordonnée et je souhaite définir le <li> sur <li class="active">...</li> lorsque la page en cours est rendue dans le navigateur.

Je suppose que je devrai accéder à la requête en cours pour déterminer quand définir l'attribut sur le <li>

Je ne trouve aucun exemple sur la façon de procéder, alors j'espère que quelqu'un pourra vous aider

Merci

node.jsexpresspug
18
Jon

Essayez ceci avant votre appel res.render () sur votre route:

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

ou

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

Ensuite, vous devrez faire un tas de déclarations if/else à votre avis (comme le suggère la solution ci-dessus).

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

Cependant, je préfère le faire côté client, afin que mes fichiers modèles soient exempts de toute logique possible:

Dans le fichier de modèle de page (c'est ejs, vous ne savez pas comment faire écho en jade):

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

Ensuite, avec jQuery, vous pouvez récupérer le chemin du corps et attacher une classe active:

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

Mise à jour: Vous pouvez également simplement utiliser var path = window.location.pathname au lieu de l'enregistrer dans un attribut sur 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');
});
34
chovy

Voici une façon bien plus pratique de le faire, côté serveur:

Dans votre routes.js (ou ailleurs), définissez un tableau d'objets représentant votre système de navigation, par exemple:

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

Passez la variable navLinks à votre vue, ainsi que la clé de l'élément que vous souhaitez afficher en surbrillance:

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

Vous pouvez également ajouter la variable navLinks à app.locals et vous éviter de devoir la fournir explicitement aux vues.

Ensuite, dans votre modèle de jade, parcourez le tableau de liens et définissez la classe active sur celle dont la clé correspond à la section fournie:

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

Passez le req.originalUrl dans votre fichier de routes. exemple: dans vos /routes/about.js

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

Ensuite, écrivez si condition sur votre modèle de jade

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

vous pouvez utiliser des variables globales dans app.js comme:

// Global vars
app.use( function ( req, res, next ) {
    
    // rest of your code ...
    
    res.locals.current_url = req.path;
    
    // rest of your code ...
    
          next();
    
} );

// then in your .jade file:
ul.navbar-nav.mr-auto
    li(class="nav-item #{ current_url === '/page1' ? 'active' : ''}")
         a.nav-link(href='/page1') Page1

comme cela, vous pouvez utiliser "current_url" globalement tout autour de vos fichiers de vue

0
Softmixt

Je suis venu avec ce qui fonctionne mais je ne suis pas sûr si sa meilleure pratique. Faites-moi savoir de toute façon:

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
0
Jon