Переопределение Play 2.1 Checkbox Form Helper для Twitter Bootstrap

Я хочу показать флажок HTML, за которым следует метка справа.

Я последовал предложение Villega Пер по, так и доработанные игры 2.1-снимок версия views.helper.checkbox.scala вviews.helper.twitterCheckbox.scala. Мой проект использует версию Twitter Bootstrap, предоставленную 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>
}

Я использовал помощник формы следующим образом: 

@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>
1 3
twitter-bootstrap playframework-2.1

1 ответ:

У меня была аналогичная проблема: флажок не был хорошо отформатирован для CSS TwitterBootstrap.

Поэтому мне пришлось определить свой собственный помощник checkbox (чтобы добавить тег <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:

Путь к файлу:

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 и флажка.

Надеюсь, это поможет

EDIT как просил Майк Слинн, я просто добавлен путь к файлам и несколько подробностей о неявном вызове конструктора полей. Однако имена файлов здесь не имеют особого значения, и возможны варианты для выполнения неявного вызова (см. документ doc).

8