it-swarm.com.de

Zugriff auf aktuelle Anfrage in der Express/Jade-Ansicht

Ich habe eine Layout-Jade-Ansicht mit einem Menü über eine ungeordnete Liste und möchte den <li> auf <li class="active">...</li> setzen, wenn die aktuelle Seite im Browser gerendert wird.

Ich gehe davon aus, dass ich auf die aktuelle Anforderung zugreifen muss, um zu bestimmen, wann das Attribut für den <li> festgelegt werden soll.

Ich kann keine Beispiele dafür finden, in der Hoffnung, dass jemand helfen kann

Vielen Dank

18
Jon

Versuchen Sie dies, bevor Sie res.render () auf Ihrer Route aufrufen:

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

oder

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

Dann müssten Sie Ihrer Ansicht nach eine Reihe von if/else-Anweisungen ausführen (wie in der obigen Lösung vorgeschlagen).

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

Ich bevorzuge dies jedoch auf der Clientseite, um meine Vorlagendateien von möglichst viel Logik freizuhalten:

In der Seitenvorlagendatei (dies ist ejs, nicht sicher, wie in Jade zu echo):

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

Dann können Sie mit jQuery den Pfad von body abrufen und eine aktive Klasse anhängen:

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

Update: Sie können auch einfach var path = window.location.pathname verwenden, anstatt es in einem Attribut für body zu speichern.

//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

Hier ist eine viel übersichtlichere Methode, die serverseitig angewendet wird:

Definieren Sie in Ihrem routes.js (oder wo auch immer) ein Array von Objekten, die Ihr Navigationssystem darstellen, wie folgt:

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

Übergeben Sie die Variable navLinks an Ihre Ansicht sowie den Schlüssel des Elements, für das Sie eine Hilfestellung wünschen:

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

Sie können die Variable navLinks auch zu app.locals hinzufügen und sparen sich damit, dass Sie sie immer explizit für Ansichten bereitstellen müssen.

Durchlaufen Sie dann in Ihrer Jadevorlage das Array von Links und setzen Sie die aktive Klasse auf diejenige, deren Schlüssel mit dem bereitgestellten Abschnitt übereinstimmt:

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

Übergeben Sie die req.originalUrl in Ihrer Routendatei. Beispiel: in Ihrer /routes/about.js

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

Schreiben Sie dann, wenn sonst Bedingung auf Ihre Jadeschablone

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

sie können globale Variablen in app.js wie folgt verwenden:

// 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

auf diese Weise können Sie "current_url" global für alle Ihre Ansichtsdateien verwenden

0
Softmixt

Ich habe mir das ausgedacht, aber ich bin mir nicht sicher, ob es die beste Vorgehensweise ist. Bitte lassen Sie es mich so oder so wissen:

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