2017-02-01 36 views
2

ejsを初めて使用しています。現在のメニュー項目を強調表示するメニューを持っています。以下に示すようにcurrentMenuの値を明示ルータによって提供されて3進演算子を使用してejsのHTML要素にクラスを追加する方法

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

: 私はこれを試してみました

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' 
    }) 
    } 
}); 

どのように私はクラスを追加すると仮定していますしてください?あなたが出力するために、<%= %>タグで表現値<% %>タグを交換する必要が

答えて

6

EJS documentation状態として

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

を、<% %>タグは、制御フロー、無出力コードのためのものです。 <%= %>タグはHTMLテンプレートに値を出力して補間します。

たとえば、ifステートメントは、ステートメントをHTMLに出力する必要がないため、<% %>タグを使用します。次に、条件の内部で、<%= %>タグ:<%= currentMenu %>を使用して、変数が出力され、HTMLテンプレートに補間されます。

<% if (currentMenu === 'dashboard') { %> 
    <span><%= currentMenu %></span> 
<% } %> 
関連する問題