Calling a function as a parameter in a template call in Play

Question

In Play/Scala; I am confused as to why this won't compile:

   @(tabNames: Seq[String])

   @isActive(idx: Int) = {
       @if(idx < 1) {
           "active"
       } else {
           ""
       }
   }

   <ul class="nav nav-tabs">
       @for((tab, idx) <- tabNames.zipWithIndex) {
           @views.html.generic.navLi("tab" + idx.toString, tab, isActive(idx))
       }
   </ul>

The error reads:

found : play.twirl.api.HtmlFormat.Appendable [error] (which expands to) play.twirl.api.Html [error] required: String [error]
@views.html.generic.navLi("tab" + idx.toString, tab, isActive(idx))

It doesn't recognise the call to isActive within the call to the template and I have tried multiple variations, e.g. @isActive(idx), isActive(@idx) ${isActive(idx)} (as suggested here), etc. This template generates a navigation bar, passing in tab names and checking to see if the nav li should be active (configured by class name/JS).

It just seems that the syntax must be different when calling a function within another template call - I can't get it right.

Answer 1

Documentation makes a distinction between

• reusable code block
• reusable pure code block

Note the subtle difference in @ usage between

@isActive(idx: Int) = {
  @if(...

@isActive(idx: Int) = @{
  if(...

Reusable pure code block can have arbitrary return type. In your case, to have String as return type, you could write:

   @isActive(idx: Int) = @{
       if(idx < 1) {
           "active"
       } else {
           ""
       }
   }

Answer 2

The Play documentation is a little light in this area; while it is certainly possible and useful to declare "functions" in a twirl template, the return type seems to be locked to (effectively) Html - i.e. your "block" (as it is referred to in the documentation) must render HTML.

The quickest solution, as suggested in the documentation, is to relocate the logic into a Scala class; for something as simple as this, an object is the easiest way to get this done, i.e.:

package views

object ViewHelper {

  def isActive(idx: Int):String = {
    if(idx < 1) {
      "active"
    } else {
      ""
    }
  }
}

and:

<ul class="nav nav-tabs">
   @for((tab, idx) <- tabNames.zipWithIndex) {
       @views.html.generic.navLi("tab" + idx.toString, tab, ViewHelper.isActive(idx))
   }
</ul>

The advantages of this approach include testability and reusability. Just be careful to avoid getting carried away with what a ViewHelper can do - database lookups etc are a bad idea here! :-)