Play框架是活动菜单项/路由。

Question

我想要给当前菜单项添加样式，为此我需要将当前URL与路由进行比较。我知道可以使用JavaScript来实现这一点，但是我想知道其他人是如何在Play中解决这个问题的。

有什么建议吗？

伪代码：

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

- Leon Radley

Answer 1

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

很容易。 ：D

- Javier Buzzi

---

你可以像这样在控制器基类上检查（对于全局导航很有用）：#{if request.controller=="ControllerClassName"}class="active"#{/if} - Bijan

Answer 2

这个解决方案对我很有帮助。它的优点在于非常简单。

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>

- Olivier Refalo

Answer 3

很遗憾，我没有找到一种简单的方法来做到这一点。我能找到的最简单的解决方案是编写一个快速标签（但这可能是由于我缺乏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);
      }
   }
}

请确保添加相关的导入。

这样可以让您指定活动和非活动类，比您请求的更多一些。

- Codemwnci

---

为什么你使用else if而不是简单的else？ - niels

因为如果inactiveStyle为空，它会打印null作为样式，而如果activeStyle或inactiveStyle为空，我不想打印任何内容......if的第一部分是相同的，但第二个评估对于这两个if语句是不同的。 - Codemwnci

Answer 4

这段代码对我来说可行

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

- Haroldo Ramirez