如何使用三元运算符将 class 添加到 ejs 中的 HTML 元素

Question

我刚开始使用 ejs。我有一个菜单，我想突出显示当前菜单项。我试过这个：

<li class=<% currentMenu == 'dashboard' ? 'active' : ''%>>
    <a href= '/dashboard'>
       <i class="material-icons">dashboard</i>
       <span>Dashboard</span>
    </a>
</li>

currentMenu 的值由 express 路由器提供，如下所示：

app.get('/dashboard', function(req, res) {
  if (isAuthorised) {
    res.render('pages/index', {
      title: 'Welcome | MW Tracker',
      email, userName, role, menus,
      currentMenu: 'dashboard'
    })
  } else {
    res.render('pages/sign-in', {
      title: 'Sign In | MW Tracker'
    })
  }
});

请问我该如何添加 class？

Answer 1

您需要将<% %>标签替换为<%= %>标签才能输出表达式值：

<li class="<%= currentMenu === 'dashboard' ? 'active' : '' %>">
  <!-- -->
</li>

如EJS documentation所述，<% %>标签用于control-flow，无输出代码；而 <%= %> 标签输出并将值插入 HTML 模板。

例如下面的if语句使用了<% %>标签，因为语句不需要输出到HTML中。然后在条件内部，使用 <%= %> 标签将变量输出并插入到 HTML 模板中：<%= currentMenu %>.

<% if (currentMenu === 'dashboard') { %>
  <span><%= currentMenu %></span>
<% } %>

如何使用三元运算符将 class 添加到 ejs 中的 HTML 元素

How to use a ternary operator to add a class to an HTML element in ejs

javascript

node.js

template-engine

ejs