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

概述我有一些测验系统,用户可以通过单选按钮显示问题和几个答案选项. 但是当我使用一个通过列表填充的inputRadioGroup的帮助器时,它看起来不再漂亮了(比如Twitter Bootstrap). radiobuttons是内联的,而它们应该在彼此之下.实际上我想将图标更改为更漂亮的按钮. 这就是它当下的样子： 因此我尝试编写自己的自定义表单助手,但一直卡住.我觉得很难理解这个文档： https 我有一些测验系统,用户可以通过单选按钮显示问题和几个答案选项.

但是当我使用一个通过列表填充的inputRadioGroup的帮助器时,它看起来不再漂亮了(比如Twitter bootstrap). radiobuttons是内联的,而它们应该在彼此之下.实际上我想将图标更改为更漂亮的按钮.

这就是它当下的样子：

因此我尝试编写自己的自定义表单助手,但一直卡住.我觉得很难理解这个文档：
https://www.playframework.com/documentation/2.3.x/JavaFormHelpers

首先,我创建了一个名为myFIEldConstructorTemplate.scala.HTML的新模板

@(elements: helper.FIEldElements)<div ><label for="@elements.ID">@elements.label</label><div >    @elements.input    <span >@elements.errors.mkString(",")</span>    <span >@elements.infos.mkString(",")</span></div></div>

将其保存到/ vIEws-folder.然后尝试在我的视图类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"  value="Send">    Next Question</button>}@implicitFIEld = @{ FIEldConstructor(myFIEldConstructorTemplate.f) }@inputText(answerRadioForm("questionID"))

如果我把它放到我的模板中,我得到一个not found：value implicitFIEld-error.

那么我怎么能设法将我的无线电按钮的外观改为底部并看起来像Twitter bootstrap？

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

@(questionList: List[Question],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

我认为这与我将答案导入radiobuttons的方式有关？

[EDIT2]：
现在进口的顺序是：

@(questionList: List[Question],answerRadioForm: Form[Answer])@import models.Question@import models.Answer@import helper._@implicitFIEld = @{ FIEldConstructor(myFIEldConstructorTemplate.f) }

有了这个,该程序编译.但是无线电按钮看起来仍然一样.所以我试图改变设计,这不太合适.现在看起来所有的radiobutton都融化成一个：

这是我的模板类myFIEldConstructorTemplate.scala.HTML：

@(elements: helper.FIEldElements)<div ,data-toggle="buttons"><label for="@elements.ID">@elements.label</label><div >    <label >    @elements.input    <span >@elements.errors.mkString(",")</span></label></div></div>

[编辑方面3]：我已经根据to the last answer改变了我的班级,但仍然将无线电按钮融合在一起.所以我想指出我并不关注使用inputRadioGroup from the playframework helper,如果有另一个解决方案工作原理相同并且看起来几乎像bootstrap,我很乐意使用它.似乎改变助手并不容易/直观.我感谢任何形式的帮助！

解决方法 Twitter bootstrap结构需要准确.

像这样在inputRadioGroup助手周围包装btn-group类：

<div  data-toggle="buttons">@helper.inputRadioGroup(    answerRadioForm("Answer"),'_error -> answerRadioForm("answerID").error.map(_.withMessage("select answer")))</div>

然后用以下代码替换模板：

@(elements: helper.FIEldElements)<label >    @elements.input @elements.label</label><span >@elements.errors.mkString(",")</span><span >@elements.infos.mkString(",")</span>

一般来说,也许有兴趣采取另一种方式.当你使用fooForm(“myFIEld”…)时,你可以在for循环中使用fooForm(“myFIEld [@i]”…),其中@i是一个从0到有多少输入的计数器.然后你可以自己绘制完整的HTML而不是使用隐式值.

顺便说一下,Scala版本的所有这些文档比Java版本有更多的信息.请参阅here.它提供了有关inputRadioGroup的更多信息,而不是文档的Java版本,但仍然非常有用,可以更好地理解所有这些.

有些Play Bootstrap plugin在GitHub上提供了代码,它也很有用,特别是因为它也使用隐式值.

UPDATE

这里有几个GitHub项目展示了如何实现这个目标：

>使用Scala版Play：https://github.com/bjfletcher/play-bootstrap-radio-group
>使用Java版Play：https://github.com/bjfletcher/play-java-bootstrap-radio-group

结果截图：

总结

以上是内存溢出为你收集整理的html – 如何为动态生成的内容编写自定义表单助手模板？全部内容，希望文章能够帮你解决html – 如何为动态生成的内容编写自定义表单助手模板？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。