Expressで現在のページナビゲーションをどのようにターゲットに設定できますか？

Question

は今のところ、私はそうのように、jQueryの経由でこれをやっている：

$(".navigation__item a").each(function() { 
    if (window.location.pathname === $(this).attr("href")) { 
    $(this).parent().addClass("active"); 
    } 
}); 

はしかし、これは完全な証拠ではないので、私は自分のナビゲーションビューに「アクティブ」パラメータに沿って通過したいのですが、私はそれをする方法がわからない。ここに私のナビゲーションテンプレートの抜粋です：

<aside class="navigation-wrap"> 
    <ul class="navigation"> 
    <li class="navigation__item{{#if current}} active{{/if}}"> 
     <a href="/admin/dashboard">Overview</a> 
    </li> 

    <li class="navigation__item{{#if current}} active{{/if}}"> 
     <a href="/admin/customization">Customization</a> 
    </li> 

    <li class="navigation__item{{#if current}} active{{/if}}"> 
     <a href="/admin/employees">Employee</a> 
    </li> 
    </ul> 
</aside> 

そしてここでは、私のルート・ファイルの抜粋です：

app.get("/admin/:directory/:page", require("connect-ensure-login").ensureLoggedIn("/admin"), (req, res) => { 
    if (req.params.page === "new") { 
    res.render("admin/" + req.params.directory + "/new", Object.assign({ layout: "layouts/admin", navHighlight: "active" }, app.get("result")[0])); 
    } else { 
    employeeService.find({ query: { Slug: req.params.page }}, (error, employee) => { 
     employee = employee[0]; 

     res.render("admin/employees/employee", Object.assign({ employeeRequest: req.params.page, Title: "Admin | " + employee.Name, layout: "layouts/admin" }, app.get("result")[0])); 
    }); 
    } 
}); 

誰かがまだこのような何かを達成していますか？私はSOなどを検索して何も見つけられませんでした。

Answer 1

Micheal Trogerの助けを借りて、私は解決策を見つけました。

src/routes/index.js

app.get("/admin/*", require("connect-ensure-login").ensureLoggedIn("/admin"), (req, res) => { 
    const parts = req.path.split("/"); 

    /* 
    console.log(
    req.path + "\n", 
    "0: " + parts[0] + "\n", // 
    "1: " + parts[1] + "\n", // admin 
    "2: " + parts[2] + "\n", // employees // directory 
    "3: " + parts[3]   // david-sarif // page 
); 
    */ 

    if (parts[3]) { 
    if (parts[3] === "new") { 
     res.render("admin/" + parts[2] + "/new", Object.assign({ layout: "layouts/admin", navigation: app.get("navigationAdmin") })); 
    } else { 
     employeeService.find({ query: { Slug: parts[3] }}, (error, employee) => { 
     employee = employee[0]; 

     res.render("admin/employees/employee", Object.assign({ employeeRequest: parts[3], Title: "Admin | " + employee.Name, layout: "layouts/admin", navigation: app.get("navigationAdmin") })); 
     }); 

     handheldService.find({ query: { Slug: parts[3] }}, (error, handheld) => { 
     handheld = handheld[0]; 

     res.render("admin/handhelds/handheld", Object.assign({ handheldRequest: parts[3], Title: "Admin | " + handheld.Name, layout: "layouts/admin", navigation: app.get("navigationAdmin") })); 
     }); 
    } 
    } else { 
    res.render("admin/" + req.params[0], Object.assign({ user: req.user, title: "Admin", layout: "layouts/admin", navigation: app.get("navigationAdmin") })); 
    } 
}); 

src/middleware/index.js

module.exports = (app) => { 
    app.use((req, res, next) => { 
    // Create navigation for backend 
    function createNavigation(navigation, data) { 
     let 
     html = "", 
     extraClass = ""; 

     const parts = req.path.split("/"); 

     /* 
     console.log(
     req.path + "\n", 
     "0: " + parts[0] + "\n", // 
     "1: " + parts[1] + "\n", // admin 
     "2: " + parts[2] + "\n", // employees // directory 
     "3: " + parts[3]   // david-sarif // page 
    ); 
     */ 

     for (data of navigation) { 
     if (parts[2] && data.url.includes(parts[2])) { 
      extraClass = " active"; 
     } 

     html += "<li class='navigation__item" + extraClass + "'><a href='" + data.url + "'>" + data.name + "</a></li>"; 
     extraClass = ""; 
     } 

     app.set("navigationAdmin", html); 
    } 

    const navigationItems = [ 
     { url: "/admin/dashboard", name: "Overview" }, 
     { url: "/admin/customization", name: "Customization" }, 
     { url: "/admin/employees", name: "Employee" }, 
     { url: "/admin/handhelds", name: "Handheld" } 
    ]; 

    createNavigation(navigationItems); 
    }); 
}; 

このコードは、私が正確なページまたはサブページ上だかどうかを強調し滞在する私のナビゲーションが可能になります。たとえば、site.com/exampleとsite.com/example/newは両方ともナビゲーションの「例」を表示します。

ブーム。

編集：ナビゲーションが実際に表示される場所を追加するのを忘れてしまった！

<aside class="navigation-wrap"> 
    <ul class="navigation"> 
    {{{ navigation }}} 
    </ul> 
</aside> 

Answer 2

異なる方法があります。だから我々は、動的<li>と<a>タグを記述することによってオブジェクト配列と缶ループを持っている

var navi = [ 
    {url: "/admin/dashboard", name: "Overview"}, 
    {url: "/admin/customization", name: "Customization"}, 
    {url: "/admin/employees", name: "Employee"} 
]; 

：私の心に自然に来ることの一つは、あなたのような変数にあなたのナビゲーションを救うことができること、です。条件では、リクエストURLに応じてリンクをアクティブにすることも大したことではありません。

<ul> 
    <li class=''><a href='/admin/dashboard'>Overview</a></li> 
    <li class=''><a href='/admin/customization'>Customization</a></li> 
    <li class='active'><a href='/admin/employees'>Employee</a></li> 
</ul> 

今セットアップを次のとおりです。私は、ハードコードのリクエストURLに応じて出力することができた最小セットアップを

。

index.js：

var express = require('express'); 
var app = express(); 
var hbs = require('hbs'); 

app.set('view engine', 'hbs'); 

hbs.registerHelper('list', function(naviItems, reqUrlItem, options) { 
    var out = ""; 
    var cssClass = ""; 

    for(var i=0, l=naviItems.length; i<l; i++) { 
    if (reqUrlItem === naviItems[i].url) { 
     cssClass = "active"; 
    } 
    out += "<li class='"+cssClass+"'><a href='"+naviItems[i].url+"'>" + naviItems[i].name + "</a></li>"; 
    cssClass = ""; 
    } 

    return out; 
}); 

var navi = [ 
    {url: "/admin/dashboard", name: "Overview"}, 
    {url: "/admin/customization", name: "Customization"}, 
    {url: "/admin/employees", name: "Employee"} 
]; 
var reqUrl = "/admin/employees"; 

app.get('/', function(req, res) { 
    res.render('test', {navi: navi, reqUrl: reqUrl}); 
}); 

app.listen(3000); 

test.hbs

<ul> 
    {{#list navi reqUrl}}{{/list}} 
</ul> 

だから、基本的にあなたがあなたのナビゲーション変数とリクエストパラメータで呼び出すlistと呼ばれるハンドルバーのヘルパー関数を登録する（両方がされています以前にテンプレートに渡されました）。ヘルパー関数は自明でなければなりません。 お手伝い願います！