エクスプレス内の翡翠ビューの部分表示としてのメニューのレンダリング

Question

翡翠ビューのパーシャルを使用するExpressアプリケーションでアクティブな状態でメニューをレンダリングする方法を概念化するのに問題があります。

私はこのようなものがあります：私が好きな何

ul.menu 
    li 
    a(href='/some/route').active 
    li 
    a(href='/another/route') 

は、現在のルートに適用する.activeクラスなので、私のCSSは、アクティブなUIの状態をレンダリングすることができます。

私がPHPで書いたとき、これはif/elseの複雑なチェーンによって完成しましたが、より洗練されたアプローチがとられています。私は何が欠けていますか？

Answer 1

ジェイドは経路について無知です。私はif/elseを回避する方法はないと思います。エクスプレスで

、ちょうどローカルとしてルートを渡す：

res.render('my_view', { 
    current: 'current/url' 
}); 

とビューで、メニューのリンクの配列を持っていると同じような何かを：私のソリューションは、に似て

ul.menu 
    for each item in links 
    li 
     if (item.url == current) 
     a(href=item.url).active 
     else 
     a(href=item.url) 

Answer 2

danmactoughの、しかし私は少しきちんとしたと思う。

ミドルウェアを使用して、すべてのリクエストでローカル変数としてURLを保存します。これがあなたのルートの前に来ていることを確認してください。メニューの

app.use(function(req, res, next) { 
    res.locals.url = req.url; 
    next(); 
}); 

マイジェイドテンプレートはすべてのビューにVARを渡すこの

ul 
    each link in links 
    li 
     a(href=link.url, class=link.url === url && 'active')= link.name