ヒゲレスのようなロジックレステンプレートエンジンでnav-barを作る方法

Question

ロジックレスの背後にあるコンセプトを理解しようとしていますが、私は自分自身を壁に当てています。

簡単なナビゲーションバーを実装したいと思います。すべてのページの上部にある "Home、About、Contact"リンクをクリックし、 "現在"のクラスを別のクラスで強調表示する必要があります（私はブートストラップを使用しています）。しかし、私はこれをどのようにして賢明なやり方で行うことができますか？これまでのところ、私は持っています：

1. navをすべてのテンプレートに移動し、すべてをコピーします（DRY、醜いのではありません）。
2. 値の代わりにと<a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a>のキーを使用してください。これは優れていますが、1変数のデータを保持するためにN変数を作成する必要があるのはまだ迷惑です。
3. コントローラにナビを作成します。すなわち、{ 'Home': {link: '/', active: false}, 'About: {link: '/about', active: true} }またはそれに類するものを渡します。論理的でないテンプレートの反対の問題があるので、私はこれを嫌う。今、私はHTMLフルコントローラを持っています...

私は（2）最高です。しかし、私が希望することのようにチェックするための単一の変数、持っているいくつかの方法である：私はこれがアップすべて口ひげの専門家のための時間が来ると確信している

// controller 
render('about', {active: 'about'}); 
render('home', {active: 'home'}); 

// mustache nav 
<a href="/" {{#if active == 'home'}}class="active"{{/if}}>Home</a> 
<a href="/about" {{#if active == 'about'}}class="active"{{/if}}>About</a> 

を---何に対処するための最良の方法ですそれ？

Answer 1

これに対処する方法はありませんバニラMustacheを使用しています。

var selected_item = function(param) { 
    if (param == this.active) { 
     return 'active'; 
    } 
}; 

（免責事項：あなたはこのようにそれを使用できるように口ひげを使用して

1-、ヘルパー関数を記述します。 あなたのJSONデータとテンプレートがきれい滞在させ、2つのオプションがあり、私は書きました私の頭の上のうち、このヘルパーは、そのままで動作しない場合がありますが、私は、あなたがポイントを得ると思います）

<a href="/" class="{{#selected_item}}home{{/selected_item}}">Home</a> 
<a href="/about" class="{{#selected_item}}about{{/selected_item}}">About</a> 

その後、ミックスにそのヘルパーあなたのJSONデータに、最善の方法は、おそらくをオーバーロードされていますrenderを呼び出すたびにヘルパーが追加されます。 class=""の部分をヘルパーの外に残しておけば、アクティブな部分の "ロジック"を維持しながら、各メニュー項目に複数の異なるクラスを持つことができます。

2-スイッチHandlebarsに切り替えると、この種の基本ロジックが可能になります。 HandlebarsはMustacheのスーパーセットで、バニラのMustacheで動作するものはHandlebarsで直接動作しますので、アップグレードは簡単です。ただし、Handlebarsで作業するようにテンプレートをアップグレードして変更してしまえば、元に戻すことはできません。

Answer 2

私はちょうどこれについての投稿を書いた。 hereまたはバナーをクリックしてください：

バニラ口ひげとNodeJSでこれを行うための基本的な考え方はそうのようなものです：それぞれ別々のルートが異なる口ひげ変数を送信する方法

app.get('/Portfolio', function(req, res) { 
    res.render('portfolio.html', { 
     Portfolio: 'class="current"', 
    }); 
}); 


app.get('/Blog', function(req, res) { 
    res.render('blog.html', { 
     Blog: 'class="current"', 
    }); 
}); 

注意してください。ユーザーが/ Portfolioに行く場合、{{{Portfolio}}}変数は存在しますが、{{{Blog}}}変数は存在しません。

<div id="nav"> 
    <ul> 
     <li><a href="/Portfolio" {{{ Portfolio }}}>Portfolio</a></li> 
     <li><a href="/Blog"  {{{ Blog }}}>Blog</a></li> 
    </ul> 
</div> 

今すぐリンクが作られたルーティングコールに依存して強調表示されます.currentクラス

#nav li a.current { 
    font-weight: 900; 
} 

を作成します。このアイデアを使用して

は、そのようなあなたのナビゲーションリンクを設定します。