Question

First I want render code is:

ul
 li
  a

the render result should be

 <ul>
  <li><a></li>
 </ul>

then I add conditional:

 ul
  - if (temp == "blog") {
  li.active
  - } else {
  li  
  - }
   a

but the render result is

<ul>
 <li.active></li>
 <a>
</ul>

what’s wrong with my code? How can I get the same render result as the first one?

Answer 1

Try this:

ul
  - if temp === "blog"
    li.active
      a
  - else
    li  
      a

If you prefer not to duplicate the nested a, you can use:

ul
  li(class = (temp === 'blog') ? 'active' : '')
    a

Also useful for menu lists and tabs, you can inline nesting like this:

ul
 li: a
 li: a.active
 li: a
// ...etc