为 Twitter Bootstrap 覆盖 Play 2.1 Checkbox Form Helper

Question

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

我关注Pere Villega's suggestion，将views.helper.checkbox.scala的Play 2.1-SNAPSHOT版本修改为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>

然后我创建了一个对上面模板进行隐式调用的字段构造函数：

文件路径：

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 和复选框正确显示。

希望对你有帮助

EDIT 按照 Mike Slinn 的要求，我刚刚添加了文件路径和有关字段构造函数的隐式调用的一些细节。但是，文件名在这里并不重要，变体可以进行隐式调用（参见文档）。