覆盖Play Bootstrap的Play 2.1 Checkbox Form Helper

Question

我想显示一个HTML复选框,然后是右边的标签.

我跟着佩尔Villega的建议,并修改的播放2.1快照版本views.helper.checkbox.scala的views.helper.twitterCheckbox.scala.我的项目使用Webjars提供的Twitter Bootstrap版本:

@**
 * 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._

这恰好是在doc(http://www.playframework.com/documentation/2.1.0/ScalaFormHelpers)中写的,它可以很好地解决.

最后,我的所有输入都通过Twitter Bootstrap和复选框正确显示.

希望这可以帮助

按照Mike Slinn的要求编辑,我刚刚添加了文件路径和一些关于字段构造函数的隐式调用的细节.但是,文件名在这里并不重要,并且可以使用变体进行隐式调用(请参阅doc).