0

電話番号の入力を取得するカスタム HTML を作成しています。これは、電話の種類の選択ボックスと電話番号のテキスト ボックスを備えたコントロール グループであると想定されています。レイアウトは、組み込みの HTML ヘルパー @select および @inputText で行われるものとは異なる必要があります。したがって、私のコードは次のようになります。

@phoneGroup(field: Field, className: String = "phone") = {
  <div class="control-group">
    <label class="control-label" for="@field("type").id">@Messages("company.phoneNumbers")</label>
    <div class="controls">
      <select id="@field("type").id" name="@field("type").name">
        @options(models.PhoneType.options)
      </select>
      <input type="text" id="@field("number").id" name="@field("number").name" value="@field("number").value">
    </div>
  </div>
}

そして、私は次のように私のテンプレートでそれを呼び出します:

@repeat(companyForm("phones"), min = 2) { phone =>
  @phoneGroup(phone)
}

結果として得られる HTML では、

@options(models.PhoneType.options)

生成される HTML は次のとおりです。

<div class="control-group">
  <label class="control-label" for="phones_0__type">Phone numbers</label>
  <div class="controls">
    <select id="phones_0__type" name="phones[0].type">
      (MAI,Main)(MOB,Mobile)(FAX,Fax)(CUS,Custom)
    </select>
    <input type="text" id="phones_0__number" name="phones[0].number" value="">
  </div>
</div>

どうやら @options は、models.PhoneType.options で渡した Map の文字列表現を出力するだけのようです。問題は、@options ヘルパーを使用して次の HTML を生成するにはどうすればよいかということです。

<option value="MAI">Main</option>
<option value="MOB">Mobile</option>
<option value="FAX">Fax</option>
<option value="CUS">Custom</option>

私は Java プログラマーですが、Scala の経験はありません。おそらく些細なことですが、例は見つかりませんでした。

前もって感謝します。- ドミトリ

UPDATED 2013-11-07 - 以下の回答セクションに解決策を掲載

4

2 に答える 2

0

手がかりをありがとう、デビッド。@select を使用しなかった理由は、select タグの周りにフォーマット HTML も生成し、コンポーネントのレイアウトを制御したかったからです。@select を適切にカスタマイズする方法がわからなかったので、とりあえずこの道を進みました。OK、あなたが示唆したように、オプションのScalaコードをコピーしただけで、うまくいきました：

<select id="@field("type").id" name="@field("type").name" class="input-small">
    @options(models.PhoneType.options).map { v =>
        <option value="@v._1" 
            @if(Some(v._1) == (field("type").value)) { selected  }>@v._2</option>
    }
</select>

唯一の問題は、inputRadioButtonGroup コード ( https://github.com/playframework/playframework/blob/master/framework/src/play/src/main/scala/views/helper ) のように Some(v._1) を使用する必要があったことです。 /inputRadioGroup.scala.html )、それ以外の場合、比較は機能しませんでした。なぜそうなのかを理解するには、少しscalaを学ばなければなりません:)

または、次のように for ループも機能します。

<select id="@field("type").id" name="@field("type").name" class="input-small">
    @for((value, text) <- models.PhoneType.options) {
        <option value="@value" 
            @if(Some(value) == (field("type").value)) { selected  }>@text</option>
    }
</select>
于 2013-11-07T21:17:49.947 に答える