0

私は、Scala を使用する必要があるビュー用に Play フレームワーク v 2.1 を使用してアプリケーションを開発しています。
ここで見つけることができる Play フレームワークのサンプル コードの 1 つを読み込もうとしていました http://www.playframework.com/documentation/2.0 .x/Samples the Forms one
アプリのビュー フォルダーには、form.scala.html というファイル views.contact パッケージがあります。

@(contactForm: Form[Contact])
@import helper._
@import helper.twitterBootstrap._

 @title = {
 Add a new contact <small><a href="@routes.Contacts.edit">Or edit an existing     contact</a></small>
 }

@phoneField(field: Field, className: String = "phone") = {
    @input(field, '_label -> "Phone numbers", '_class -> className) { (id, name, value, _) =>
    <input type="text" name="@name" value="@value"> 
    <a class="removePhone btn danger">Remove</a>
    }
}

@informationGroup(field: Field, className: String = "profile") = {
<div class="twipsies well @className">

    <a class="removeProfile btn danger pull-right">Remove this profile</a>

    @inputText(
        field("label"), 
        '_label -> "Label"
    )

    @inputText(
        field("email"), 
        '_label -> "Email"
    )

    <div class="phones">

        @repeat(field("phones"), min = 0) { phone =>

            @phoneField(phone("number"))

        }

        @**
         * Keep an hidden block that will be used as template for Javascript copy code
         **@
        @phoneField(
            field("phones[x].number"),
            className = "phone_template"
        )

        <div class="clearfix">
            <div class="input">
                <a class="addPhone btn success">Add a phone number</a>
            </div>
        </div>

    </div>

</div>
}

@main(title, nav = "contact") {

@if(contactForm.hasErrors) {
    <div class="alert-message error">
        <p><strong>Oops</strong> Please fix all errors</p>
    </div>
}

@helper.form(action = routes.Contacts.submit, 'id -> "form") {

    <fieldset>
        <legend>General informations</legend>

        @inputText(
            contactForm("firstname"), 
            '_label -> "First name"
        )

        @inputText(
            contactForm("lastname"), 
            '_label -> "Last name"
        )

        @inputText(
            contactForm("company"), 
            '_label -> "Company"
        )

    </fieldset>

    <fieldset>
        <legend>Profiles</legend>

        <div id="profiles">

            @repeat(contactForm("informations")) { information =>

                @informationGroup(information)

            }

            @**
             * Keep an hidden block that will be used as template for Javascript copy code
             **@
            @informationGroup(
                contactForm("informations[x]"),
                className = "profile_template"
            )

            <div class="manage">
                <a class="addProfile btn success">Add another profile</a>
            </div>

        </div>

    </fieldset>

    <div class="actions">
        <input type="submit" class="btn primary" value="Insert">
        <a href="@routes.Application.index" class="btn">Cancel</a>
    </div>

}

コードは、このようなビューをレンダリングすることになっています
ここに画像の説明を入力

電話番号の追加を押すと、いくつかのフィールドがフォームに追加され、次のようになります。

ここに画像の説明を入力

このコードについて私を本当に混乱させているのは、これらの部分とそれらがどのように機能するかです:

@phoneField(field: Field, className: String = "phone") = {
    @input(field, '_label -> "Phone numbers", '_class -> className) { (id, name, value,   _) =>
  <input type="text" name="@name" value="@value"> 
  <a class="removePhone btn danger">Remove</a>
  }

}

と

@repeat(field("phones"), min = 0) { phone =>

        @phoneField(phone("number"))

    }

    @**
     * Keep an hidden block that will be used as template for Javascript copy code
     **@
    @phoneField(
        field("phones[x].number"),
        className = "phone_template"
    )

誰かがこれらのコード行がどのように機能するかについて簡単な説明を提供してくれませんか。ブログや Web サイトの短いチュートリアルへのリンクを Scala に貼り付けないでください。Google 検索で自分で見つけることができます。

これらのコード行についての短い説明的な説明を探しています。よろしくお願いします!!

ところで、元のコードからJavaScriptコードを削除しました

4

1 に答える 1

2

関数から始めましょう@phoneField：

@phoneField(field: Field, className: String = "phone") = {
    @input(field, '_label -> "Phone numbers", '_class -> className) { (id, name, value,   _) =>
       <input type="text" name="@name" value="@value"> 
       <a class="removePhone btn danger">Remove</a>
    }
}

@inputフィールドの html を自分で作成できるようにするヘルパー (つまり関数) です。.removePhoneボタンを追加したいので、これはこのコンテキストで必要です。したがって@phoneField、単純にFieldhtml 入力と remove-link のインスタンスを取得して構築します。

さて、どう@repeatですか？

@repeat(field("phones"), min = 0) { phone =>            
     @phoneField(phone)
}

app/controllers/Contacts.scala で contactForm を定義すると、「phones」フィールドが list(text) として定義されていることがわかります。これは、テキスト フィールドである要素を持つ一種のコレクションです。したがって、@repeat は反復処理をfield("phones")行い、各テキスト フィールドを@phoneField. @phoneField に送られるすべてのフィールドには、「phones[0]」、「phones 1」などの名前が付けられることが重要です。

今、物事は面白くなりました。

 @phoneField(
       field("phones[x]"),
       className = "phone_template"
 )

「電話フィールドの追加」ボタンに応答してページにコンテンツをコピーする JavaScript 関数のテンプレートを作成します。field("phones[x]")生成されているものと同様に、「phones[x]」という名前の空のフィールドを構築するように見え@repeatます。次に、コンストラクト全体が、「phones[x]」という名前と空の値を持つ phone フィールド (および remove-link) を作成します。

JavaScript コードを見ると、ユーザーが [電話番号を追加] リンクをクリックすると、JavaScript コールバックが実行され、テンプレートから HTML の下の DOM にコピーさ<div class="phones">れ、すべての .phone 入力の番号が付け直されることがわかります。マッチ/phones\[.+\]/

フォーム テンプレート ヘルパーの使用を読んでいただければ幸いです。

于 2014-01-16T09:59:14.533 に答える