Question

现在，我正在通过jQuery这样做：

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

但是，这不是完全证明，所以我想将“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

肯定有不同的可能方法。我脑海中浮现的一件事是，您可以将导航保存在变量中：

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

因此我们有一个对象数组，可以循环遍历以动态编写<li>和<a>标记。根据条件，根据请求URL设置链接活动也应该没什么大不了的。

使用最小设置我可以根据硬编码请求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>

现在进行设置。

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的Handlebars辅助函数，你可以使用你的导航变量和你的请求参数调用它们（之前都已经传递给了模板）。辅助函数应该是不言自明的。希望它有所帮助！

Answer 2

在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将在我的导航中点亮“示例”。

BOOM。

编辑：忘记添加导航实际显示的位置！

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

如何定位Express中的当前页面导航？

2 个答案: