Playframework - активный пункт меню/маршрут

Я бы хотел, чтобы стиль активного элемента меню, чтобы сделать это, мне нужно сравнить текущий url снова маршрут. Я знаю, что могу сделать это в javascript, но мне было интересно, как другие люди решили это в игре.

Любые предложения?

псевдокод:

<a #{routeIsActive Application.index()} class="active"#{/if} href="@{Application.index()}">My Page</a>

Ответы

Ответ 1

К сожалению, я не мог найти простой способ сделать это. Самое простое решение, которое я смог найти, - написать быстрый тег (но это может быть связано с отсутствием опыта Groovy).

Я получил эту работу с этим кодом.

В вашем представлении

<a class="#{activeRoute href:@Application.index(), activeClass:'active' /}" href="@{Application.index()}">My Page</a>

Затем создайте новый FastTag для activeRoute

public class MyFastTag extends FastTags {

   public static void _activeRoute(Map<?, ?> args, Closure body, PrintWriter out, GroovyTemplate.ExecutableTemplate template, int fromLine) {
      Router.ActionDefinition actionDef = (Router.ActionDefinition) args.get("href");
      String activeStyle = (String) args.get("activeClass");
      String inactiveStyle  = (String) args.get("inactiveClass");

      if (Http.Request.current().action.equals(actionDef.action) && activeStyle != null) {
         out.print(activeStyle);
      }
      else if (!Http.Request.current().action.equals(actionDef.action) && inactiveStyle != null) {
         out.print(inactiveStyle);
      }
   }
}

Убедитесь, что вы добавили соответствующий импорт.

Это позволяет указать активный и неактивный класс, который немного больше, чем вы запросили

Ответ 2

<a #{if request.action=="Application.index"}class="active"#{/if} href="@{Application.index()}">My Page</a>

Легко.: D

Ответ 3

Это решение работало очень хорошо для меня. Это может быть очень простым.

приложение/просмотров/теги/navigationitem.js

%{
 boolean isMatch = request.path.startsWith(_href.toString());
}%
<li class="sliding-element">
#{if isMatch}
<h3>${_title}</h3>
#{/if}
#{else}
<a href="${_href}">${_title}</a>
#{/else}
</li>

приложение/просмотров/теги/navigationmenu.js

#{js 'navigationmenu.js'/}
#{css 'navigationmenu.css'/}

<div id="navigation-block">
    <ul id="sliding-navigation">
        #{navigationitem title:'Home', href:@HomeController.index() /}
        #{navigationitem title:'Search Contact', href:@SearchByContactController.index() /}
        #{navigationitem title:'Edit Contact', href:@EditContactInfoController.index() /}
    </ul>
</div>

Ответ 4

Этот код работает для меня, ребята

<li @if(request.path.startsWith("/artigo")){ class="active" }>
    <a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>