Как я могу условно назначить цвет текста в jade

Question

У меня есть приложение, использующее mongodb, node.js, express, jade templating, jquery. У меня есть набор документов, каждый из которых содержит статус «активный» или «истек». Я хотел бы отображать дату «активных» документов в зеленом и «истекшем» документах в красной.

.list 
    if (applications.length === 0) 
     | No applications. 
    each application, index in applications 
     .item 
     div 
      -if (application.Status = "active") 
      -$(".dateapplied").addClass("activeClass") 
     div 
     div.dateapplied 
      div 
        -var day = application.Applied.getDate() 
        -var m = application.Applied.getMonth() 
        -var y = application.Applied.getFullYear() 
        -var prettydate = m + "/" + day + "/" + y 
      div 

      span.name=prettydate 
      |&nbsp 
     div.name 

линия - $ (".dateapplied") .addClass ("activeClass") оказывает:

500 TypeError: /Users/eddie/logicalpath/jobkeeper/views/applications.jade:20 18 | div 19 | -if (application.Status = "active")> 20 | - $ (".dateapplied") .addClass ("activeClass") 21 | div 22 | div.dateapplied 23 | ДИВ неопределенными не является функцией

Мои CSS классы:

.activeClass { цвет: зеленый }

.expired Класс { цвет: красный }

Моя цель состоит в том, чтобы чтобы индикация даты была красной для истекших и зеленых для активных. Я пытаюсь использовать классы css, а не inline css. Я не уверен, как добавить класс в .dateapplied. Или, возможно, я думаю об этом неправильно. Любая помощь оценивается.

Спасибо!

Answer 1

Попробуйте это:

.list 
    if (applications.length === 0) 
     | No applications. 
    each application, index in applications 
     .item 
     div 
     div.dateapplied(class=(application.Status == 'active')? 'activeClass':'expiredClass') 
      div 
        -var day = application.Applied.getDate() 
        -var m = application.Applied.getMonth() 
        -var y = application.Applied.getFullYear() 
        -var prettydate = m + "/" + day + "/" + y 
      div 

      span.name=prettydate 
      |&nbsp 
     div.name 

Вы можете применить условные внутри атрибутов, например:

(class=(application.Status == 'active')? 'activeClass':'expiredClass')