Twitter bootstrap 覆盖Twitter引导的Play 2.1复选框表单帮助程序

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

我随后修改了play2.1-SNAPSHOT版本的

views.helper.checkbox.scala

为

views.helper.twitterCheckbox.scala

。我的项目使用的Twitter引导版本由以下供应商提供：

似乎有某种我不知道的隐性行为。我如何生成如下内容，或者至少生成一些输出，以获得所需的结果

<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>

先修课程

sku1

我也遇到了类似的问题：TwitterBootstrap CSS的复选框格式不好

因此，我必须定义自己的复选框助手（以便添加

标记）：

文件路径：

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>

@(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>

package controllers.helpers

import views.html.helper.FieldConstructor

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

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

文件路径：

app\controllers\helpers\BootstrapHelper.scala

内容：

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

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

@(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>

package controllers.helpers

import views.html.helper.FieldConstructor

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

最后，我只是在“正常”视图中导入它：

这正是doc（）中所写的，并且它运行得很好

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

希望这有帮助

---

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

teemoo，是否显示文件名？它将帮助其他人尝试你的方法code@MikeSlinn根据建议添加了文件名，并详细说明了隐式调用。我希望你能让它工作。文件名很有用，谢谢。有时，一旦你看到它们，你就会明白，但要说清楚。

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