node.jsのアクティブなメニュー項目で、

Question

node.js,expressおよびexpress-handlebarsを使用しています。レイアウトの上にメニューがあります。私server.jsで

、私は

app.locals.pages = [ 
    { title: 'Home', link: '/' }, 
    { title: 'About', link: '/about' }, 
    { title: 'Contact', link: '/contact' }, 
]; 

ですべてのページを設定し、レイアウトファイルで、私は

{{#each pages}} 
    <li class="nav-item"> 
    <a class="nav-link" href="{{link}}">{{title}}</a> 
    </li> 
{{/each}} 

でページを印刷するが、私はメニュー項目にクラスを追加します現在アクティブになっています。

3つのメニュー項目のどれをアクティブにすることができますか？

Answer 1

として、あなたのCSSのアクティブなリンクを管理することができ、今 id bodyすなわち

body(id= typeof body_id === "undefined" ? "body_id" : body_id)

のようbody_idを割り当てます

私はあなたのコードのためにこれをテストしませんが、それはうまくいくはずですが、ハンドルバーを使用するなら、これを試すことができます

テンプレート

再び

{{#each page in pages}} 
    <li class="{{isSelected page.link page_link }}"> 
    <a class="nav-link" href="{{page.link}}">{{page.title}}</a> 
    </li> 
{{/each}} 

であなたのノードのjs

router.get('/', function(req, res){ 
    var pageData = {}; 
    pageData.page_link = 'home'; 
    res.render('template_page', pageData); 
}); 

上

Ember.Handlebars.helper('isSelected', function(v1,v2, options) { 
    if (v1 && v2) { 
     return new Ember.Handlebars.SafeString("active"); 
    }else{ 
     return new Ember.Handlebars.SafeString("nav-item"); 
    } 
}); 

し、あなたのコードの
：私はこれをテストしていません。しかし、html要素のハンドルバーのヘルパーは正常に動作します

Answer 2

経路からbody_id（または他の名前）パラメータをビューに渡すことができます。

router.get('/', function(req, res){ 
    var pageInfo = {}; 
    pageInfo.body_id = 'homepage'; 
    // assign more parameters relevant for this view here 
    res.render('home_page', pageInfo); 
}); 

今、あなたのビューファイルでは、あなたが

body#home_page .nav_item:nth-child(1), 
body#about_page .nav_item:nth-child(2), 
{ 
    background-color: red; 
    /* more css styles that you want to give to your active menu item */ 
}