Scala/Twirl 个变量和 scope/defining

Scala/Twirl variables and scope/defining

我的职业是前端开发人员,但我被要求跳到一个利用 Play 框架(包括 Twirl)的 Scala 项目。我正在尝试创建一个模板,根据传入的字符串显示略有不同的输出。

这是我的代码:

@(status: String)(implicit messages: Messages)

@{
    if(status == "00") {
        val pageTitle = "Page title"
        val appStatus = "className"
        val title = "message"
        val subTitle = "message"
        val step1Status = "className"
        val step2Status = "className"
        val step3Status = "className"
        val image1 = "/customs/assets/images/image.png"
        val image2 = "/customs/assets/images/image.png"
        val image3 = "/customs/assets/images/image.png"
        val optionalHeading = ""
        val optionalParagraph = ""
        val listContents = "<li>@Messages('message')</li><li>@Messages('message')</li>"
        val optionalLink = "<br /><a class='button' href='@routes.DashboardController.display(custom)' role='button'>@Messages('message')</a>"
    }

    if(status == "01") {
        //Other variables
    }
    if(status == "04") {
        //Etc...
    }
}

@layout(${pageTitle}) {
        <div class="content__body">
            <div class="hero">
                <div class="${appStatus}">
                    <h1 class="bold-large">@Messages(${title})</h1>
                    <p>
                        ${afterSubTitle}
                    </p>
                    <ol class="appstatus-steps">
                        <li><span class="${step1Status}"><img alt="Complete" title="Complete" src=" + ${image1} + ">@Messages("messages.Received")</span></li>
                        <li><span class="${step2Status}"><img alt="Complete" title="Complete" src=" + ${image2} + ">@Messages("messages.Processing")</span></li>
                        <li><span class="${step3Status}"><img alt="Complete" title="Complete" src=" + ${image3} + ">@Messages("messages.Decision")</span></li>
                    </ol>
                </div>
            </div>

            ${optionalHeading}
            ${optionalParagraph}

            <h2>@Messages("messages.next")</h2>

            <ul class="list list-bullet">
                ${listContents}
            </ul>

            ${optionalLink}
        </div>
    }

因此,如您所见,这个想法是使用代码(状态)调用此页面,并根据该字符串定义许多变量,这些变量会改变页面的形成方式; content/css classes/images 等等

这不行(你可能会惊讶地学会!)

我真的不清楚为什么没有。我以为您使用 ${Variable} 格式访问变量,但您可能应该改用 @Variable 格式。

即使我尝试将它们更改为 @Variable 方式,我仍然遇到问题,我大致理解这与 Scala/Twirl 中的范围有关并且有一个 "defining" 关键字可以使用。我已经阅读了一些文档,但我不明白。

有人能解释一下吗?

编辑

好吧,我们只考虑下面的代码:

@(status: String)(implicit messages: Messages)

@{
    if(status == "00") {
        val myClass = "custom-class-1"
    }
    if (status == "01") {
        val myClass = "custom-class-2"
    }
@layout("page title") {
    <div class="@myClass">This is a div</div>
}

所以'all I want to do' :) 能够根据状态定义各种变量,然后在页面模板中使用这些变量。

这有意义吗?我是 Scala 的新手,所以 Tuples/Defining 目前对我迷路了,但我正在学习!

你似乎更习惯javascript变量和作用域:)

在 Scala 和 Twirl 中,如果您只在 if 语句中定义一个变量(在本例中它是一个值,因为它是不可变的),则该值只能在 if 块中访问

一个解决方案是将 if 语句 return 包含所有变量的元组,并使用赋值操作的强大功能,例如:

val (myA, myB, myC) = if(something) {
 val a = "a"
 val b = "b"
 val c = "c"

 (a,b,c) // this will return the 3 variables/values because if statements are an expression, and expressions return something
} else {
 val a = "A"
 val b = "B"
 val c = "C"

 (a,b,c)
}

// now you have a,b,c defined in this scope and you can do whatever you need with them

如果你想 return 不同的变量取决于 if 语句,你将有更多的复杂性。一个解决方案是使不需要的变量 nullOption

如果您需要更好的解释,请告诉我:)

EDIT: solution for minified edited example

我这里没有任何东西可以检查它是否编译,但它应该是这样的:

@(status: String)(implicit messages: Messages)

@{
    val myClass = if(status == "00") {
        "custom-class-1"
    } else if (status == "01") {
        "custom-class-2"
    } else {
      ""
    }

@layout("page title") {
    <div class="@myClass">This is a div</div>
}

备选方案 使用模式匹配:

将 if/else 语句替换为:

val myClass = status match {
          case "00" => "custom-class-1"
          case "01" => "custom-class-2"
          case _ => ""
        }

case _ 就像 "in every other case")

@pedrorijio 的回答几乎完全正确,但最终对我有用的实际代码是这样的:

@myClass = @{status match {
  case "00" => "custom-class-1"
  case "01" => "custom-class-2"
}}

感谢您的协助!