html - 如何为动态生成的内容编写自定义表单助手模板？

Question

我有某种测验系统，向用户显示一个问题和几个带有单选按钮的答案选项。

但是当我对通过列表填充的 inputRadioGroup 使用助手时，它看起来不再漂亮(如 Twitter Bootstrap)。单选按钮是内联的，而它们应该在彼此的下方。实际上，我想将图标更改为更漂亮的按钮。

现在是这样的:

因此，我尝试编写自己的自定义表单助手，但一直卡壳。我发现很难理解这方面的文档: https://www.playframework.com/documentation/2.3.x/JavaFormHelpers

首先，我创建了一个名为 myFieldConstructorTemplate.scala.html

的新模板

@(elements: helper.FieldElements)

<div class="@if(elements.hasErrors) {error}">
<label for="@elements.id">@elements.label</label>
<div class="input">
    @elements.input
    <span class="errors">@elements.errors.mkString(", ")</span>
    <span class="help">@elements.infos.mkString(", ")</span>
</div>
</div>

将其保存到/views 文件夹。然后尝试在我的 View 类中使用它 quiz.scala.html:

@import helper._
@import helper.twitterBootstrap._

@(questionList: List[Question], answerList: List[Answer], answerRadioForm: Form[Answer])

@helper.form(action = routes.Application.nextQuizPage(), 'id -> "answerRadioForm"){
    @helper.inputRadioGroup(
    answerRadioForm("Answer"),
    options = answerList.map(answer => answer.answerID.toString -> answer.answerText),
    '_label -> "Answer",
    '_error -> answerRadioForm("answerID").error.map(_.withMessage("select answer")))
<button type="submit" class="btn btn-default" value="Send">
    Next Question
</button>
}
@implicitField = @{ FieldConstructor(myFieldConstructorTemplate.f) }
@inputText(answerRadioForm("questionID"))

如果我将它放入我的模板中，我会得到一个not found: value implicitField-error。

那么我怎样才能设法将我的单选按钮的外观更改为在下方并看起来像 Twitter Bootstrap？

[EDIT1]:我已将导入顺序更改为建议版本:

@(questionList: List[Question], answerList: List[Answer], answerRadioForm: Form[Answer])

@import helper._
@implicitField = @{ FieldConstructor(myFieldConstructorTemplate.f) }
@import helper.twitterBootstrap._

然后我得到这个错误:

ambiguous implicit values: 
both method implicitField of type => views.html.helper.FieldConstructor 
and value twitterBootstrapField in package twitterBootstrap of type 
=> views.html.helper.FieldConstructor match expected type 
views.html.helper.FieldConstructor

我认为这与我将答案导入单选按钮的方式有关吗？

[编辑2]:现在导入的顺序是:

@(questionList: List[Question], answerList: List[Answer], answerRadioForm: Form[Answer])

@import models.Question
@import models.Answer

@import helper._
@implicitField = @{ FieldConstructor(myFieldConstructorTemplate.f) }

这样，程序就可以编译了。但是单选按钮看起来还是一样的。所以我试图改变设计，但效果不佳。现在看起来所有的单选按钮都融合成了一个:

这是我的模板类myFieldConstructorTemplate.scala.html:

@(elements: helper.FieldElements)

<div class="btn-group", data-toggle="buttons">
<label for="@elements.id">@elements.label</label>
<div class="input">
    <label class="btn btn-primary">
    @elements.input
    <span class="errors">@elements.errors.mkString(", ")</span>
    <span class="help">@elements.infos.mkString(", ")</span>
</label>
</div>
</div>

[EDIT3]:我已经根据 to the last answer 更改了我的类(class)，但单选按钮仍然相互融合。所以我想指出，我并不专注于使用 inputRadioGroup from the playframework helper ，如果有另一个解决方案的工作原理相同并且看起来几乎像 Bootstrap ，我会很乐意使用它。似乎更改助手并不是那么容易/直观。我感谢任何形式的帮助!

Answer 1

Twitter Bootstrap 结构需要准确。

将 btn-group 类包裹在 inputRadioGroup 助手周围，如下所示:

<div class="btn-group" data-toggle="buttons">
@helper.inputRadioGroup(
    answerRadioForm("Answer"),
    options = answerList.map(answer => answer.answerID.toString -> answer.answerText),
    '_label -> "Answer",
    '_error -> answerRadioForm("answerID").error.map(_.withMessage("select answer")))
</div>  

然后将模板替换为:

@(elements: helper.FieldElements)

<label class="btn btn-primary">
    @elements.input @elements.label
</label>

<span class="errors">@elements.errors.mkString(", ")</span>
<span class="help">@elements.infos.mkString(", ")</span>

一般来说，也许另一种方式会很有趣。当您使用 fooForm("myField"...) 时，您可以在 for 循环，其中 @i 是一个从 0 到有多少输入的计数器。然后您可以自己勾勒出完整的 HTML，而不是使用隐式值。

顺便说一句，关于所有这些的 Scala 版本的文档比 Java 版本有更多的信息。参见 here .它比 Java 版本的文档包含更多关于 inputRadioGroup 的信息，但对于更好地理解这一切仍然非常有用。

一些 Play Bootstrap plugin GitHub 上有可用的代码，阅读起来也很有用，尤其是因为它也使用隐式值。

更新

这里有几个 GitHub 元素展示了如何实现这一点:

• 使用 Scala 版本的 Play:https://github.com/bjfletcher/play-bootstrap-radio-group
• 使用 Java 版 Play:https://github.com/bjfletcher/play-java-bootstrap-radio-group

结果截图: