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>

我没有使用dd hml类型的实现，而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) }

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

1 个答案: