我应该如何处理默认助手或twitterBootstrap助手在我的Play 2应用程序中生成的html输出

Question

这是我的模板:

@(smsReviewForm: Form[SmsReview], grades: Seq[Grade])

@styles = {

}

@scripts = {

}
@import mobile.mobileMain
@import helper._
@mobileMain(Messages("reco.index.title"), styles, scripts) {
    <div id="header">
        <p class="floatleft"><img src="@routes.Assets.at("images/mobile/general/reco.png")" alt="Reco" /></p>
        <div class="clear"></div>
    </div>

    @helper.form(routes.Sms.submit) {

        @helper.inputText(
            smsReviewForm("lastname"),
            '_label -> "Label",
            '_id -> "lastname"
        )

        <div class="actions">
            <input type="submit" class="btn primary" value="Submit">
        </div>
    }
}

使用常规时@import helper._,我的应用程序中生成的html看起来像play 2.1文档中的示例:

<dl class=" " id="lastname_field">
    <dt><label for="lastname">Label</label></dt>
    <dd>
    <input type="text" id="lastname" name="lastname" value="">
</dd>
        <dd class="info">Required</dd>    
</dl>

如果我使用@import helper.twitterBootstrap._它看起来像:

<div class="clearfix  " id="lastname_field">
<label for="lastname">Label</label>
<div class="input">

<input type="text" id="lastname" name="lastname" value="">
    <span class="help-inline"></span>
    <span class="help-block">Required</span> 
</div>

我没有使用ddhml类型的实现,而twitter bootstrap的东西看起来更像是我习惯使用的结构,但我对实现bootstrap js和css不感兴趣.所以我的问题是你对此有何看法.你用过什么？也许您使用自己的实现进行html渲染？

Answer 1

您应该创建自己的字段构造函数以指定您的渲染样式。

请参阅此处的官方文档了解“编写自己的构造函数”部分：

http://www.playframework.com/documentation/2.1.0/ScalaFormHelpers

因此，您不需要导入基本helpers._或默认的引导字段构造函数helper.twitterBootstrap._，而是import MyOwnHelpers._引用您的模板。

文档中很好地解释了整个过程：）

有关更多信息，请参阅我创建的一个字段构造函数的示例：当然，我精确地说，您可以自由地不使用 boostrap。就我而言，我做到了。

twitterBootstrapInput.scala.html

<div class="control-group @if(elements.hasErrors) {error}">
    <label class="control-label" for="@elements.id">@elements.label</label>
    <div class="controls">
    @if(elements.args.contains(Symbol("data-schedule"))){
          <div class="schedulepicker input-append">
              @elements.input
            <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
          </div>
    } else {
        @elements.input
    }
        <span class="help-inline">@elements.errors.mkString(", ")</span>
    </div>
</div>

及其在我相关xx.scala.html文件中的导入：

@implicitFieldConstructor = @{ FieldConstructor(twitterBoostrapInput.f) }