5

这是我的模板：

@(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 渲染？

4

1 回答 1

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) }
于 2013-03-04T11:00:31.903 回答