2

Twitter ブートストラップを使用して最初の Web アプリケーションを作成していますが、気に入っていますが、同じことを繰り返すという問題に直面しています。

ナビゲーション バーを作成していますが、URL に基づいてアクティブなタブを UI に反映させたいと考えています。バックボーンを使用して URL をルーティングしています。唯一の問題は、タブが適切な状態を反映するように、URL に基づいて「アクティブ」または「」になるようにさまざまな変数を手動でコーディングする必要があることです。

<template name="navbar">

<div class="container">
    <div class="row">
    <div class="span6">
    <ul class="nav nav-tabs">
        <li class="{{home}}">
            <a href="/home/">Home</a></li>

        <li class="{{1999s10}}{{1965malibu}}{{1960hearse}}{{1966gto}}{{1971blazer}} dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">Cars<b class="caret"></b></a>

            <ul class="dropdown-menu">
                <li class="{{1999s10}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>
                <li class="{{1965malibu}}"><a href="/cars/1965malibu">1965 Malibu</a></li>
                <li class="{{1960hearse}}"><a href="/cars/1960hearse">1960 Hearse</a></li>
                <li class="{{1966gto}}"><a href="/cars/1966gto">1966 GTO</a></li>
                <li class="{{1971blazer}}"><a href="/cars/1971blazer">1971 Bazer</a></li>
                <!-- <li class="divider"></li> -->
            </ul>
        </li>  
    </div>
    </div>
</div>

ご覧のとおり、現在、アクティブなタブを示すための変数がたくさんあります。次のコードの実装を開始しましたが、あまりにも洗練されていないため、停止してより良い方法を使用したいと考えています。

Template.navbar.home = function () {
    return Session.equals("active", "home") ? "active" : '';
};

// a bunch more of these for every route

var TodosRouter = Backbone.Router.extend({
    routes: {
        "home/": "home",
            // more routes
    },
    home: function () {
        Session.set("active", "home");
    },
    // more functions for capturing the routes and setting the session variable "active"
});

Router = new TodosRouter;

Meteor.startup(function () {
    Backbone.history.start({pushState: true});
});

この方法を使用する：（1）数字で始まる変数の問題があります（私の悪い）（2）それに応じてセッションの「アクティブな」変数を変更するためにすべてのURLをルーティングする必要があります（3）すべてのテンプレートハンドラーを作成する必要がありますナビゲーション バーのボタン/URL

これを行うためのより良い方法が必要ですが、私はまだそれを見つけていません。

繰り返しますが、DRY (同じことを繰り返さない) プログラミングの原則を破ることなく、必要なタブをアクティブ化する方法を見つけたいと考えています。

編集：

本当にいいのは、次のようなものです。

<li class="{{(url=="/cars/1999s10/")?"active":""}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>

それは最小限のコードになります。

4

5 に答える 5

6

ルート名をパラメーターとして取り、正しいクラス名を返すグローバル Handlebars ヘルパーを作成してみてください。

if (Meteor.isClient) {
    Handlebars.registerHelper('TabClassName', function (route) {
        return Session.equals("active", route) ? "active" : "";
    });
}

次に、テンプレートで、次のようにヘルパーを呼び出します。

<li class="{{TabClassName 'home'}}">
于 2012-10-28T00:45:45.333 に答える
1

私はうまくいくものを見つけました：

Handlebars.registerHelper('TabActive', function (route) {
    var url = Session.get("url");
    var index = $.inArray(route, url);
    return (index != -1) ? "active" : "";
});


var TodosRouter = Backbone.Router.extend({
    routes: {
        "*url": "main"
    },
    main: function (url) {
        Session.set("url", url.split('/'))
    }
});

HTML では、「 vs 」が重要です。

<li class='{{TabActive "home"}}'>

これは機能しますが、私の唯一の懸念は、後で他のURLにルーターを使用することです...

于 2012-11-19T03:41:44.120 に答える
0

アプリの現在の状態を管理するために、静的アプリ状態クラスを使用しています。

を使用しSessionて現在の状態を保存します。

ハンドルバーヘルパーで、正しい状態をテストします

(コーヒースクリプト)

Template.foo.helpers
  is_active: ->
    appState.isState appState.FOO

テンプレートでは、それを使用してリンクのスタイルを設定します

{{#if is_active}}
  <a href="/bar" class="active">/bar</a>
{{else}}
  <a href="/bar">/bar</a>
{{/if}}

appstate オブジェクトは非常に単純です

appState =
  FOO : "foo"
  BAR: "bar"

  setState: (state) ->
    Session.set(SESSION_STATE, state)

  getState: ->
    Session.get(SESSION_STATE)

  isState: (state) ->
    @getState() is state

アプリのどこかで appstate が変更された場合、リアクティブ マジックが発生します ;)

appState.setState appState.LIST

アップデート：

コールバックを使用してrenderedアクティブなクラスをナビゲーション項目に追加する (未テスト!)

Template.foo.rendered = ->
  current = Backbone.history.fragment
  links = this.findAll("ul li a")

  links.forEach((link) ->
    $(link).parent().addClass("active") if link.href is current  
  )
于 2012-10-24T18:24:59.387 に答える
0

jtblin が指摘したように、これには Template ヘルパーを使用できます。以下のコードは、Meteor > 1.0 および Iron Router > 0.9.4 で実行されます。

ルート名をヘルパーに渡す代わりに、正規表現を渡すことができます。これは、サブメニューがある場合により適しています。

# file: /client/helpers.coffee

Template.registerHelper 'activeMenuItem', (expression) ->
   reg = new RegExp(expression, 'i')
   if reg.test Router.current().route.getName() then "active" else ""

次のようにテンプレートでヘルパーを使用します。

<li class="menu {{activeMenuItem 'persons'}}"> … </li>

このようにして、persons で始まるすべてのルート (たとえば、personsList、personsAdd、personsEdit など) の「アクティブ」を取得します。したがって、サブメニューがある場合にも適しています。

于 2014-11-27T15:16:08.923 に答える