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>

然后我创建了一个字段构造函数，对上面的模板进行了一次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的要求，

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

覆盖Play Bootstrap的Play 2.1 Checkbox Form Helper

1 个答案: