Playframework 是活动的菜单项/路线答案

【问题标题】：Playframework is active menu item / routePlayframework 是活动的菜单项/路线
【发布时间】：2010-12-10 10:18:34
【问题描述】：

我想设置活动菜单项的样式，为此我需要将当前 url 与路由进行比较。我知道我可以在 javascript 中做到这一点，但我想知道其他人是如何解决这个问题的。

有什么建议吗？

伪代码：

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

【问题讨论】：

标签： playframework

【解决方案1】：

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

简单。 :D

【讨论】：

您还可以像这样检查控制器基础（对全局导航很有用）：#{if request.controller=="ControllerClassName"}class="active"#{/if}

【解决方案2】：

不幸的是，我找不到一个简单的方法来做到这一点。我能找到的最简单的解决方案是编写一个快速标签（但这可能是由于我缺乏 Groovy 经验）。

我得到了这个代码。

在你看来

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

然后，为 activeRoute 创建一个新的 FastTag

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);
      }
   }
}

确保添加相关的导入。

这允许您指定一个活动和非活动类，这比您要求的要多一点

【讨论】：

为什么你使用else if而不是简单的else？
因为，如果 inactiveStyle 为 null，它将打印 null 作为样式，如果 activeStyle 或 inactiveStyle 为 null，我不希望打印任何内容......。 if 的第一部分是相同的，但是两个 if 语句的第二次评估是不同的

【解决方案3】：

这个解决方案对我来说效果很好。它的好处是非常简单。

app/views/tags/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>

app/views/tags/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>

【讨论】：