3 진 연산자를 사용하여 ejs의 HTML 요소에 클래스를 추가하는 방법

Question

ejs를 처음 사용했습니다. 현재 메뉴 항목을 강조 표시하려는 메뉴가 있습니다. 나는 시도 이 :

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

아래 그림과 같이 currentMenu의 값은 명시 라우터에 의해 제공됩니다 :

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

은 어떻게 클래스를 추가 할 생각입니다하세요?

Answer 1

당신은 출력하기 위해 표현식 값 <%= %> 태그를 사용하여 <% %> 태그를 교체해야 다음 EJS documentation 상태로

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

의 <% %> 태그 제어 흐름, 아니 출력 코드됩니다; <%= %> 태그는 HTML 템플릿에 값을 출력하고 보간합니다.

예를 들어, if 문은 태그를 사용합니다.이 문을 HTML로 출력 할 필요가 없기 때문입니다. 그런 다음 조건 내부에서 변수가 출력되고 <%= %> 태그를 사용하여 HTML 템플리트에 보간됩니다. <%= currentMenu %>.

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