inputRadioButton - When options attribute contains HTML code答案

【问题标题】：inputRadioButton - When options attribute contains HTML codeinputRadioButton - When options attribute contains HTML code
【发布时间】：2012-10-06 00:15:23
【问题描述】：

我想在我的表单模板中使用@inputRadioGroup 助手（找到here）：

@inputRadioGroup(
          contactForm("gender"),·
          options = options("M"->"Male","F"->"Female"))

嗯，一切正常。但我想使用icon/image 而不是text。类似的东西（使用 twitter bootstrap css）：

@inputRadioGroup(
          contactForm("gender"),·
          options = options("M"->"<i class="icon-user"></i>","F"->"<i class="icon-user"></i>"))

好吧，在这种情况下，生成的html代码是：

<label for="gender_M">
&amp;lt;i class=&amp;quot;icon-user&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;
</label>

图标 html 被转义。不显示图标。我怎样才能用这个助手来发展我的想法？

注意：我尝试使用 Html() 方法，但遇到了同样的问题。以下 Scala 行代码：

options("M"->Html("<i class=\"icon-user\"></i>").text)

生成以下 HTML 代码：

<label for="gender_M">&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;</label>

在浏览器中的渲染是：

<i class="icon-info-sign"></i>

没有显示图标，因为 html 转义...有人知道吗？

提前致谢。

【问题讨论】：

标签： scala playframework playframework-2.0

【解决方案1】：

通过在views.utils 包中创建具有以下内容的inputRadioButton.scala.html 文件（根据需要进行修改）来覆盖默认字段帮助器：

@(field: play.api.data.Field, options: Seq[(String,String)], args: (Symbol,Any)*)(implicit handler: helper.FieldConstructor, lang: play.api.i18n.Lang)

@helper.input(field, args:_*) { (id, name, value, htmlArgs) =>
  <span class="buttonset" id="@id">
    @options.map { v =>
      <input type="radio" id="@(id)_@v._1" name="@name" value="@v._1" @(if(value == Some(v._1)) "checked" else "") @toHtmlArgs(htmlArgs)>
      <label for="@(id)_@v._1">@Html(v._2)</label>
    }
  </span>
}

然后当你想在你的字段模板中显示时：

@import helper._
@import views.utils.inputRadioButton

【讨论】：

【解决方案2】：

如果您需要将一个类应用于生成的标签标签，那么您就不走运了。创建 radioButtonGroup 的代码本身就是一个 scala 模板——它看起来像这样：

@input(field, args:_*) { (id, name, value, htmlArgs) =>
  <span class="buttonset" id="@id">
    @options.map { v =>
      <input type="radio" id="@(id)_@v._1" name="@name" value="@v._1" @(if(value == Some(v._1)) "checked" else "") @toHtmlArgs(htmlArgs)>
      <label for="@(id)_@v._1">@v._2</label>
    }
  </span>
}

如您所见，标签标签填充了选项标签，这是一个将被转义的字符串。您可以使用具有选择器的 CSS 规则设置背景图像，例如：

span.buttonset#fieldId label:

或者，您可以手动创建 HTML，或根据 docs 编写自己的帮助程序。

【讨论】：