7

論理のないテンプレートの背後にある概念を理解しようとしていますが、壁にぶつかっています。

すべてのページの上部にある「ホーム、概要、連絡先」リンクなど、単純なナビゲーションバーを実装したいのですが、「現在の」リンクは別のクラスで強調表示する必要があります(ブートストラップを使用しています)。しかし、どうすればこれを賢明な方法で行うことができますか? これまでのところ、私は持っています:

  1. ナビゲーションをすべてのテンプレートに移動し、全体をコピーします (DRY ではなく、醜い)。
  2. 値の代わりにキーを使用render('home', { on_home_page: true });します<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>

これは口ひげの専門家にとって常に出てくると思います---それに対処する最善の方法は何ですか?

4

2 に答える 2

4

バニラの口ひげを使用してこれに対処する方法はありません。JSON データとテンプレートをクリーンな状態に保つには、次の 2 つのオプションがあります。

1- Mustache を使用して、次のように使用できるようにヘルパー関数を記述します。

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

（免責事項：私はこのヘルパーを頭のてっぺんから書いたので、そのままでは機能しないかもしれませんが、あなたは要点を理解していると思います）

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

次に、そのヘルパーを JSON データにミックスします。最適な方法は、おそらくオーバーロードMustache.renderして、呼び出しのたびにrenderヘルパーがミックスに追加されるようにすることです。ヘルパーの外にパーツを残すclass=""と、アクティブなパーツの「ロジック」を保持しながら、各メニュー項目に複数の異なるクラスを含めることができることに注意してください。

2-この種の基本的なロジックを可能にするハンドルバーに切り替えます。Handlebars は Mustache のスーパーセットであり、vanilla Mustache で動作するものは Handlebars でも直接動作するため、アップグレードは簡単です。ただし、ハンドルバーで動作するようにテンプレートをアップグレードおよび変更すると、後戻りできないことに注意してください。

于 2012-05-11T18:53:30.907 に答える