2

Bootstrap-3でこのナビゲーション バー機能を見つけましたが、現在は Iron-Router の代わりに Flow-Router を使用しています。したがって、このヘルパー関数を Flow-Router 用語に変換しようとしています。

Template.navItems.helpers({
    activeIfTemplateIs: function (template) {
      var currentRoute = Router.current();
      return currentRoute &&
        template === currentRoute.lookupTemplate() ? 'active' : '';
    }
});

私は自分で問題を解決しようと試みましたが (私のサイト/アプリの多くの部分がまだ機能していないため、テストはしていません)、「はい」または「いいえ」の形式で確認する必要があります。おそらく、私が間違っていたことについてもう少し情報があります。

Template.navItems.helpers({
    activeIfTemplateIs: function (template) {
      var currentRoute = FlowRouter.current();
      return currentRoute &&
        template === currentRoute.name ? 'active' : '';
    }
});

Flow-Router APIから導き出しました。このソリューションは正しいですか、それとも何らかの理由で Iron-Router で使用することが厳密に義務付けられているのでしょうか?

4

3 に答える 3

6

あなたの実際の問題についてもう少し考えた後、私はこれをアプリでまったく異なる方法で行っていることに気付きました。おそらく、そのパターンが役立つかもしれません。私のアプリもブートストラップを使用しており、アクティブなルートを強調表示する (および他のすべてのルートを強調表示しない) ナビゲーションがあります。

Iron-router では、次のことを行います。

onAfterAction(){
  const selector = '.nav a[href="/' + Router.current().route.getName() + '"]'; // the nav item for the active route (if any)
  $('.nav-active').removeClass('nav-active'); // unhighlight any previously highlighted nav
  $(selector).addClass('nav-active'); // highlight the current nav (if it exists, many routes don't have a nav)
}

Flow-Router では、次のようonAfterActionに置き換えられtriggersExitます。

triggersExit(){
  const selector = '.nav a[href="' + FlowRouter.current().path + '"]';
  $('.nav-active').removeClass('nav-active');
  $(selector).addClass('nav-active');
}

これは、スペースバー テンプレートをいじるよりもはるかに便利であることがわかりました。

参考までに、ルート名を取得するにはいくつかのオプションがあります。

FlowRouter.getRouteName() // reactive

また

FlowRouter.current().route.name // NOT reactive
于 2015-09-27T20:59:29.517 に答える
3

Active-Route パッケージを使用できるようになりました。

例えば：

<a class="nav-tab {{isActivePath class='nav-current' path='/new'}}" href="/new">
  New
</a>
于 2016-04-23T21:33:20.173 に答える
0

より完全なイメージを与えるために、これが私のプロジェクトで行ったことです。

テンプレート HTML コード

<template name="topNavbar">
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a class="navbar-brand" href="/">Sample</a></li>

    <li class="{{ activeIfTemplateIs 'home' }}">
      <a href="/home">Home</a>
    </li>

    <li class="{{ activeIfTemplateIs 'users' }}">
      <a href="/users">Users</a>
    </li>

  </ul>
</nav>
</template>

JavaScript コード

Template.topNavbar.helpers({
  activeIfTemplateIs: function (template) {
    var currentRoute = FlowRouter.getRouteName();
    return currentRoute && template === currentRoute ? 'active' : '';
  }
});
于 2016-04-11T00:32:26.967 に答える