2012-10-04 23 views
17

Ho una vista di giada layout che ha un menu tramite lista non ordinata, e voglio impostare <li> per essere <li class="active">...</li> quando la pagina corrente viene visualizzata nel browser.Accesso alla richiesta corrente in Express/Jade view

Suppongo che dovrò accedere alla richiesta corrente per determinare quando per impostare l'attributo sul <li>

non riesco a trovare alcun esempio di come fare questo una persona così sperando può aiutare

Grazie

risposta

32

Prova questa prima chiamata res.render() nel vostro percorso:

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

o

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

allora si sarebbe dovuto fare un una serie di istruzioni if ​​/ else nella tua vista (come suggerisce la soluzione sopra).

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

Io però, preferiscono fare questo sul lato client, invece, per mantenere i file liberi da quanto più logica possibile il mio modello:

Nel file di modello di pagina (questo è ejs, non è sicuro di come eco in giada):

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

Poi, con jQuery si può afferrare il percorso da corpo e allegare una classe di attivo:

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

Aggiornamento: È anche possibile utilizzare var path = window.location.pathname invece di salvarlo per un attributo 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'); 
}); 
+1

L'unica cosa che vorrei dire al riguardo è che si sta facendo affidamento sull'utente che ha JS (non è una grande preoccupazione al giorno d'oggi) ma si potrebbe finire con altre cose esistenti come attributi per qualche motivo e un sacco di brutto markup prodotto – Jon

+0

C'è anche un refuso nel tuo esempio? Req.path è disponibile in EJS? Non dovrebbe essere la proprietà del tuo modello di vista? – Jon

+0

scusa, nei miei percorsi faccio res.locals.req = req così ho accesso a tutte quelle informazioni. Ma ho appena capito che puoi anche usare window.location.pathname invece di salvarlo sul body tag. – chovy

0

Mi sono inventato questo che funziona, ma non sono sicuro se la sua migliore pratica. Per favore fatemelo sapere in entrambi i casi:

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 
+2

Questo è molto difficile da mantenere perché si sta ripetendo i nomi di classe e collega più volte, ed è anche un sacco di codice . Vedi la mia risposta per un modo più semplice. Potrebbe anche essere adattato per funzionare fuori currentUrl come nella tua risposta, ma spesso gli oggetti nav primari dovrebbero rimanere hilighted per sub-path che non avverranno con il metodo che hai usato. –

6

Ecco un modo molto più ordinato di farlo, sul lato server:

Nella tua routes.js (o dovunque) definire una matrice di oggetti che rappresentano il navigatore come tale:

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

passare la variabile navLinks alla visualizzazione, così come la chiave della voce che ci piace hilighted:

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

È inoltre possibile aggiungere la variabile navLinks-app.locals e risparmiare sempre dover fornire esplicitamente alle viste.

Poi nel modello ciclo di giada attraverso la serie di collegamenti e impostare la classe di attivi, da una cui incontri la sezione a condizione chiave:

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

Passare il req.originalUrl nel file percorsi. esempio: nel tuo /routes/about.js

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

Quindi, scrivere se la condizione il resto sul modello di giada

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