Scala 函数如何在 Play 框架 2.1 中工作

Question

我正在使用 play framework v 2.1 开发应用程序 对于视图，我必须使用 Scala
我试图通读可在此处找到的播放框架示例代码之一 http://www.playframework.com/documentation/2.0.x/Samples 表格一
在应用程序的views文件夹中有一个名为form.scala.html的文件views.contact包

@(contactForm: Form[Contact])
@import helper._
@import helper.twitterBootstrap._

 @title = {
 Add a new contact <small><a href="@routes.Contacts.edit">Or edit an existing     contact</a></small>
 }

@phoneField(field: Field, className: String = "phone") = {
    @input(field, '_label -> "Phone numbers", '_class -> className) { (id, name, value, _) =>
    <input type="text" name="@name" value="@value"> 
    <a class="removePhone btn danger">Remove</a>
    }
}

@informationGroup(field: Field, className: String = "profile") = {
<div class="twipsies well @className">

    <a class="removeProfile btn danger pull-right">Remove this profile</a>

    @inputText(
        field("label"), 
        '_label -> "Label"
    )

    @inputText(
        field("email"), 
        '_label -> "Email"
    )

    <div class="phones">

        @repeat(field("phones"), min = 0) { phone =>

            @phoneField(phone("number"))

        }

        @**
         * Keep an hidden block that will be used as template for Javascript copy code
         **@
        @phoneField(
            field("phones[x].number"),
            className = "phone_template"
        )

        <div class="clearfix">
            <div class="input">
                <a class="addPhone btn success">Add a phone number</a>
            </div>
        </div>

    </div>

</div>
}

@main(title, nav = "contact") {

@if(contactForm.hasErrors) {
    <div class="alert-message error">
        <p><strong>Oops</strong> Please fix all errors</p>
    </div>
}

@helper.form(action = routes.Contacts.submit, 'id -> "form") {

    <fieldset>
        <legend>General informations</legend>

        @inputText(
            contactForm("firstname"), 
            '_label -> "First name"
        )

        @inputText(
            contactForm("lastname"), 
            '_label -> "Last name"
        )

        @inputText(
            contactForm("company"), 
            '_label -> "Company"
        )

    </fieldset>

    <fieldset>
        <legend>Profiles</legend>

        <div id="profiles">

            @repeat(contactForm("informations")) { information =>

                @informationGroup(information)

            }

            @**
             * Keep an hidden block that will be used as template for Javascript copy code
             **@
            @informationGroup(
                contactForm("informations[x]"),
                className = "profile_template"
            )

            <div class="manage">
                <a class="addProfile btn success">Add another profile</a>
            </div>

        </div>

    </fieldset>

    <div class="actions">
        <input type="submit" class="btn primary" value="Insert">
        <a href="@routes.Application.index" class="btn">Cancel</a>
    </div>

}

代码应该呈现这样的视图

通过按添加电话号码，一些字段被添加到表单中，它会变成这样：

让我对这段代码真正感到困惑的是这些部分以及它们是如何工作的：

@phoneField(field: Field, className: String = "phone") = {
    @input(field, '_label -> "Phone numbers", '_class -> className) { (id, name, value,   _) =>
  <input type="text" name="@name" value="@value"> 
  <a class="removePhone btn danger">Remove</a>
  }

}

和

@repeat(field("phones"), min = 0) { phone =>

        @phoneField(phone("number"))

    }

    @**
     * Keep an hidden block that will be used as template for Javascript copy code
     **@
    @phoneField(
        field("phones[x].number"),
        className = "phone_template"
    )

谁能给我简要解释一下这些代码行是如何工作的，请不要将博客或网站上的简短教程链接放到 Scala 我可以通过 Google 搜索自己找到它们

我只是在寻找关于这些代码行的简短但描述性的解释， 提前致谢！！

顺便说一句，我从原始代码中删除了 javascript 代码

Answer 1

让我们从@phoneField函数开始：

@phoneField(field: Field, className: String = "phone") = {
    @input(field, '_label -> "Phone numbers", '_class -> className) { (id, name, value,   _) =>
       <input type="text" name="@name" value="@value"> 
       <a class="removePhone btn danger">Remove</a>
    }
}

@input 是一个帮助器（即函数），它允许您自己为该字段创建 html。在这种情况下需要这样做，因为我们要添加 .removePhone 按钮。所以@phoneField 只取Field 的实例并构造html 输入和remove-link。

现在，@repeat 呢？

@repeat(field("phones"), min = 0) { phone =>            
     @phoneField(phone)
}

在 app/controllers/Contacts.scala 定义的contactForm 中，您可以看到“电话”字段定义为列表（文本）。它是一种包含文本字段元素的集合。 所以@repeat 将遍历field("phones") 并将每个文本字段传递给@phoneField。重要的是，所有将转到 @phoneField 的字段都将具有类似“phones[0]”、“phones1”、...的名称。

现在事情变得有趣了。

 @phoneField(
       field("phones[x]"),
       className = "phone_template"
 )

为 javascript 函数构造一个模板，该模板将在响应“添加电话字段”按钮时将其内容复制到页面。看起来field("phones[x]") 构造了名称为“phones[x]”的空字段，类似于@repeat 正在生成的内容。然后整个构造将创建一个名为“phones[x]”和空值的电话字段（和删除链接）。

当您查看 javascript 代码时，您会看到当用户单击“添加电话号码”链接时，将执行 javascript 回调，将 html 从模板复制到 <div class="phones"> 下的 dom，并重新编号所有名称匹配的 .phone 输入 /phones\[.+\]/

希望你已经阅读Using the form template helpers。