19

順序付けられていないリストを介したメニューを持つレイアウト Jade ビューがあり、現在のページがブラウザーでレンダリングさ<li>れるときに設定したいと考えています。<li class="active">...</li>

いつ属性を設定するかを決定するために、現在のリクエストにアクセスする必要があると思います<li>

これを行う方法の例が見つからないので、誰かが助けてくれることを願っています

ありがとう

4

5 に答える 5

37

ルートで res.render() を呼び出す前にこれを試してください。

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

また

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

次に、ビューで一連の if/else ステートメントを実行する必要があります (上記のソリューションが示唆するように)。

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

ただし、テンプレートファイルをできるだけ多くのロジックから解放するために、代わりにクライアント側でこれを行うことを好みます。

ページ テンプレート ファイル (これは ejs であり、jade でエコーする方法がわからない):

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

次に、jQuery を使用して body からパスを取得し、アクティブなクラスをアタッチできます。

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

更新：var path = window.location.pathname属性に保存する代わりに使用することもできます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');
});
于 2012-10-04T20:26:38.577 に答える
8

サーバー側でそれを行うためのはるかに優れた方法を次に示します。

あなたのroutes.js（またはどこでも）で、次のようなナビゲーションを表すオブジェクトの配列を定義します。

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

navLinksハイライトしたいアイテムのキーと同様に、変数をビューに渡します。

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

navLinksまた、変数を追加して、app.locals常にビューに明示的に提供する必要がなくなることもできます。

次に、ジェイドテンプレートでリンクの配列をループし、指定されたセクションとキーが一致するクラスにアクティブなクラスを設定します。

ul(class='nav nav-list')
  - navLinks.forEach(function(link){
    - var isActive = (link.key == section ? 'active' : '')
    li(class=isActive)
      a(href=link.path)= link.label
  - })
于 2012-10-18T15:47:20.897 に答える
2

ルート ファイルで req.originalUrl を渡します。例: /routes/about.js で

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

次に、jade テンプレートに if else 条件を記述します

    if(url==='/about-us')
     li(class='active')
      a(href='about-us') About Us
    else
     li
      a(href='about-us') About Us
于 2014-08-10T10:09:16.183 に答える
0

これは機能しますが、ベストプラクティスかどうかはわかりません。いずれかの方法でお知らせください:

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
于 2012-10-04T20:12:17.337 に答える