覆盖Twitter Bootstrap的Play 2.1复选框表单帮助器 [英] Overriding Play 2.1 Checkbox Form Helper for Twitter Bootstrap

问题描述

我想显示一个HTML复选框，其后是右侧的标签.

I want to show an HTML checkbox followed by the label to the right.

我遵循了 Pere Villega的建议，并修改了Play 2.1 -views.helper.checkbox.scala的-SNAPSHOT版本为views.helper.twitterCheckbox.scala.我的项目使用的是

I followed Pere Villega's suggestion, and modified the Play 2.1-SNAPSHOT version of views.helper.checkbox.scala asviews.helper.twitterCheckbox.scala. My project uses the version of Twitter Bootstrap provided by Webjars:

@**
 * 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>
}

我这样使用了表单帮助程序:

I used the form helper like this:

@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标签:

But I get output like this, which causes the checkbox to be on a different line then the label. The output has been formatted for readability - note the dl and dd tags:

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

似乎有某种我不知道的隐式行为.我该如何生成类似以下内容的内容，或者至少生成一些可以达到预期结果的输出?

Seems like there is some sort of implicit behavior I am unaware of. How can I generate something like the following instead, or at least some output that will give the desired result?

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

推荐答案

我有一个类似的问题:Twitter引导CSS的复选框格式不正确.

I had a similar problem: the checkbox were not well formatted for TwitterBootstrap CSS.

所以我必须定义自己的复选框帮助器(以添加<label>标签):

So I had to define my own checkbox helper (in order to add the <label> tag):

文件路径:

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:

Then, I have redefined my fields constructor template to match 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>

然后，我创建了一个字段构造器，并隐式调用了上面的模板:

Then I have created a field constructor with an impicit call to the template above:

文件路径:

app\controllers\helpers\BootstrapHelper.scala

内容:

package controllers.helpers

import views.html.helper.FieldConstructor

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

最后，我只是将其导入常规"视图中:

And finally, I just import it in my "normal" views:

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

这正是在文档中编写的( http://www.playframework. com/documentation/2.1.0/ScalaFormHelpers )，效果很好.

This is exactly was is written in the doc (http://www.playframework.com/documentation/2.1.0/ScalaFormHelpers) and it works out finely.

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

At the end, all my inputs were correctly displayed with the Twitter Bootstrap and the checkbox as well.

希望这会有所帮助

EDIT ，我只是添加了文件路径以及有关字段构造函数隐式调用的一些详细信息.但是，文件名在这里并不重要，可以使用各种变体进行隐式调用(请参阅文档).

EDIT as asked by Mike Slinn, I just added files path and a few details about the implicit call of the field constructor. However, the file names do not really matter here and variants are possible to make the implicit call (see the doc).

这篇关于覆盖Twitter Bootstrap的Play 2.1复选框表单帮助器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！