web-dev-qa-db-ja.com

Express / Jadeビューで現在のリクエストにアクセスする

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

<li>に属性を設定するタイミングを決定するには、現在のリクエストにアクセスする必要があると思います。

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

ありがとう

node.jsexpresspug
18
Jon

ルートで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を使用して、本体からパスを取得し、アクティブなクラスをアタッチできます。

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

更新：bodyの属性に保存する代わりに、var path = window.location.pathnameを使用することもできます。

//no need to save path to <body> tag first:

$(function(){
    var path = window.location.pathname;
    $('nav li a[href='+path+']').parents('li').addClass('active');
});
35
chovy

これは、サーバー側でそれを行うためのはるかに優れた方法です。

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に追加して、ビューに明示的に提供する必要がないようにすることもできます。

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

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

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

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

次に、ヒスイのテンプレートにifelse条件を記述します

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

次のようなapp.jsでグローバル変数を使用できます。

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

このように、ビューファイル全体で「current_url」をグローバルに使用できます。

0
Softmixt

私はこれが機能することを思いついたが、そのベストプラクティスかどうかはわからない。どちらの方法でも教えてください：

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