带有“活动”类的 Jade 渲染标题答案

【问题标题】：Jade Render Header with 'active' Class带有“活动”类的 Jade 渲染标题
【发布时间】：2013-08-17 23:24:45
【问题描述】：

我正在为一个简单的 Jade 问题而苦恼。

我想呈现一个标题，该标题具有应用了“活动”类的活动页面链接，但是我无法获得正确的语法。我尝试了下面的一些变体，但没有运气。

ul.header
  li
    a(href='/' class=!{activePage} === 'home' ? 'active' : '') HOME
  li
    a(href='/one' class=!{activePage} === 'home' ? 'active' : '') ONE
  li
    a(href='/two' class=!{activePage} === 'home' ? 'active' : '') TWO

当我调用 render 时，我传递了一个像这样的对象。

app.get('/', function(req, res) {
  res.render('index', {
    activePage: 'home'
  });
});

【问题讨论】：

标签： node.js templates pug

【解决方案1】：

ul.header
  li
    a(href='/', class=(activePage === 'home' ? 'active' : '')) HOME
  li
    a(href='/one', class=(activePage === 'one' ? 'active' : '')) ONE
  li
    a(href='/two', class=(activePage === 'two' ? 'active' : '')) TWO

【讨论】：

我之前也尝试过，结果我遗漏了 href 和 class 属性之间的逗号！谢谢彼得:)
是的，逗号可能是玉语法中最讨厌的东西。