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

Posted 2023-03-05

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

【英文标题】：How should I handle the html output generated in my Play 2 app by default helper or twitterBootstrap helper

【发布时间】：2013-02-18 10:13:13

【问题描述】：

这是我的模板：

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

【参考方案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)