覆盖播放2.1复选框表单助手的Twitter引导

Question

我想显示一个HTML复选框，然后右边的标签。

我跟着Pere Villega's suggestion，并修改Play 2.1-SNAPSHOT版本views.helper.checkbox.scala为views.helper.twitterCheckbox.scala。我的项目使用由Webjars提供的Twitter的引导版本：

@** 
* Generate an HTML input checkbox for Twitter Bootstrap. 
* 
* Example: 
* {{{ 
* @checkbox(field = myForm("done")) 
* }}} 
* 
* @param field The form field. 
* @param args Set of extra HTML attributes ('''id''' and '''label''' are 2 special arguments). 
* @param handler The field constructor. 
*@ 
@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang) 

@boxValue = @{ args.toMap.get('value).getOrElse("true") } 

@input(field, args:_*) { (id, name, value, htmlArgs) => 
    <label class="checkbox"> 
    <input type="checkbox" name="@name" value="@boxValue" @(
     if(value == Some(boxValue)) "checked" else "") @toHtmlArgs(htmlArgs.filterKeys(_ == 'value)) /> 
    @args.toMap.get('_text) 
    </label> 
} 

我使用的形式助手这样的：

@import helper._ 
@form(action = courseName.map(routes.CoursesController.update(_)).getOrElse(routes.CoursesController.save()), 
       args = 'class -> "form-horizontal") { 
    <div class="span3"> 
    <p><b>@{if (allCourses.size>0) "" else "No "}Prerequisite Courses</b></p> 
    <div class="control-group"> 
     <div class="controls"> 
     @allCourses.map { course => 
      @twitterCheckbox(field = editCourseForm(course.name)) 
     } 
     </div> 
    </div> 
    </div> 
} 

，但我得到这样的输出，这将导致该复选框是在不同的然后行标签。输出已格式化的可读性 - 注意dl和dd标签：

<form action="/courses/admin" method="POST" class="form-horizontal"> 
<div class="span3"> 
    <p><b>Prerequisite Courses</b></p> 
    <div class="control-group"> 
    <div class="controls"> 
     <dl class=" " id="skus_field"> 
     <dt><label for="skus">skus</label></dt> 
     <dd> 
      <label class="checkbox"> 
      <input type="checkbox" name="skus" value="true" /> 
      </label> 
     </dd> 
     </dl> 
    </div> 
    </div> 
</div> 
</form> 

好像有某种隐含的行为，我不知道的。我该如何生成如下所示的内容，或者至少有一些输出能够提供所需的结果？

<form action="/courses/admin" method="POST" class="form-horizontal"> 
<div class="span3"> 
    <p><b>Prerequisite Courses</b></p> 
    <div class="control-group"> 
    <div class="controls"> 
     <label class="checkbox"> 
     <input name="skues" type="checkbox" value="true"> sku1 
     </label> 
    </div> 
    </div> 
</div> 
</form> 

Answer 1

我有一个类似的问题：复选框没有很好地为TwitterBootstrap CSS格式化。

所以我不得不来定义（以添加<label>标签）我自己的复选框帮手：

文件路径：

app\views\helper\checkbox2.scala.html

内容：

@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang) 

<label class="checkbox"> 
    @checkbox(field, args:_*) 
</label> 

然后，我已经重新定义了我的字段构造函数模板以匹配Twitter Bootstrap：

文件路径：

app\views\helper\bootstrapInput.scala.html

内容：

@(elements: helper.FieldElements) 

<div class="control-group @if(elements.hasErrors) {error}"> 
    <label class="control-label" for="@elements.id">@elements.label</label> 
    <div class="controls"> 
     @elements.input 
     @if(!elements.errors.isEmpty) { 
      <span class="help-inline alert alert-error">@elements.errors(elements.lang).mkString(", ")</span> 
     } 
     <span class="help-block">@elements.infos(elements.lang).mkString(", ")</span> 
    </div> 
</div> 

然后，我已经创建了一个impicit调用上面的模板场构造：

文件路径：

app\controllers\helpers\BootstrapHelper.scala

内容：

package controllers.helpers 

import views.html.helper.FieldConstructor 

object BootstrapHelper { 
    implicit val myFields = FieldConstructor(views.html.helper.bootstrapInput.f) 
} 

最后，我只需要导入它在我的“正常”的观点：

@import helper._ 
@import helpers.BootstrapHelper._ 

这正是被写入文档（http://www.playframework.com/documentation/2.1.0/ScalaFormHelpers），它精细的作品出来。

最后，我的所有输入都正确显示在Twitter Bootstrap和复选框中。

希望这有助于

编辑如要求由Mike Slinn，我只添加的文件路径的信息和场构造的隐式调用几个细节。但是，文件名称在这里并不重要，变体可以进行隐式调用（请参阅文档）。