Ich habe ein Layout Jade Ansicht, die ein Menü über ungeordnete Liste hat, und ich möchte die <li> zu <li class="active">...</li>, wenn die aktuelle Seite im Browser gerendert wird.Zugriff auf aktuelle Anfrage in Express/Jade Ansicht
Ich nehme an, ich werde die aktuelle Anforderung für den Zugriff haben, um zu bestimmen, wenn das Attribut gesetzt auf dem <li>
ich keine Beispiele dafür, wie diese so gehofft, jemand zu tun finden
Dank helfen
Versuchen Sie, diese vor Ihrem Anruf res.render() in der Route:
res.locals.path = req.path;
res.render('/page');
oder
res.render('/page', { path: req.path });
Dann würden Sie tun müssen, Bündel von if/else-Anweisungen in Ihrer Sicht (wie die obige Lösung vorschlägt).
- if(currentUrl === '/')
li(class='active')
a(href='/') Current Driver Standings
- else
li
a(href='/') Current Driver Standings
ich es jedoch vor, statt diese auf Client-Seite zu tun, meine Vorlage von so viel Logik-Dateien wie möglich frei zu halten:
In Seite Vorlagendatei (diese EJS ist, nicht sicher, wie ein Echo in Jade):
<body data-path="<%= path %>">
dann mit jQuery können Sie den Pfad vom Körper packen 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 var path = window.location.pathname nur statt verwenden Sie es auf ein Attribut Speichern auf 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');
});
Ich kam mit dem was funktioniert aber ich bin mir nicht sicher, ob es die beste Praxis ist. Bitte lassen Sie 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
schreiben Das ist ziemlich schwierig zu warten, weil Sie die Klassennamen sind zu wiederholen und verbindet mehrere Male, und ist auch eine Menge Code . Siehe meine Antwort für einen einfacheren Weg. Es könnte auch angepasst werden, um currentUrl wie in Ihrer Antwort abzuarbeiten, aber primäre Navigationselemente sollten häufig für Unterpfade beleuchtet bleiben, was bei der von Ihnen verwendeten Methode nicht passieren wird. –
Hier ist eine viel sauberere Art und Weise tun, serverseitige:
In Ihrem routes.js (oder wo auch immer) ein Array von Objekten repräsentieren Ihre nav wie solche definieren:
var navLinks = [
{ label: 'Home', key: 'home', path: '' },
{ label: 'About', key: 'about', path: '/about' },
{ label: 'Contact', key: 'contact', path: '/contact' }
]
Pass die navLinks Variable zu Ihrer Ansicht, sowie die Taste des Elements Sie möchten, dass hilighted:
res.render('home', { title: 'Welcome!', section: 'home', navLinks: navLinks });
Sie auch die navLinks Variable app.locals hinzufügen und sparen Sie sich immer explizit Ansichten mit ihm zu schaffen.
Dann in Ihrer Jade Vorlage Schleife durch die Anordnung von Links und stellen Sie die aktive Klasse auf der einen, dessen Schlüsselspiele der Abschnitt:
ul(class='nav nav-list')
- navLinks.forEach(function(link){
- var isActive = (link.key == section ? 'active' : '')
li(class=isActive)
a(href=link.path)= link.label
- })
Geben Sie die req.originalUrl in Ihre Routen-Datei. Beispiel: in Ihrem /routes/about.js
router.get('/', function(req, res) {
res.render('about', {
url: req.originalUrl
});
});
Wenn dann sonst Bedingung auf Ihrem Jade Vorlage
if(url==='/about-us')
li(class='active')
a(href='about-us') About Us
else
li
a(href='about-us') About Us
Das einzige, was ich dazu sagen würde, ist, dass Sie sich auf den Benutzer mit JS (nicht eine große Sorge in diesen Tagen) verlassen, aber Sie können mit anderen Dingen als Attribute aus irgendeinem Grund und viele hässliche Markup produziert – Jon
enden Gibt es in Ihrem Beispiel auch einen Tippfehler? Ist req.path in EJS verfügbar? Sollte das nicht Ihr Modell sein? – Jon
Entschuldigung, in meinen Routen mache ich res.locals.req = req, damit ich Zugang zu all diesen Informationen habe. Aber ich habe gerade festgestellt, dass Sie auch window.location.pathname verwenden können, anstatt es für Body-Tags zu speichern. – chovy