部分更新機能

<form>要素に部分更新機能を追加します。

サンプルはこちら。

使用方法

• 当機能は、以下のファイルに依存します。

  components/appController/src/ApplicationController.js
  components/appController/src/ApplicationController.css
  - CSSファイルはエラー通知用です。デフォルトのfailHandlerを使用しない場合は不要です。(failHandlerの設定方法は後述)

• h5.ui.container.ApplicationController をコントローラ化して使用します。
  サンプルページでは全ての<formに>要素で部分更新機能を有効にするため、body要素にバインドしています。

  $(function() {
  	h5.core.controller(document.body, h5.ui.container.ApplicationController);
  });

• <form>がsubmitされると、action属性に指定されたURLにmethod属性で指定されたメソッド(指定無しならPOST)でajaxリクエストを送ります。
• ajaxリクエストのレスポンスがJSONなら、<form>要素に対して受け取ったJSONオブジェクトでデータバインドを行います。
  data-h5-bindが指定されている要素が<form>内になければ何もしません。
• ajaxリクエストのレスポンスが文字列(HTML)なら、<form>要素を、受け取ったHTMLに差し替えます。
  <form>にバインドされていたコントローラ、及びその子要素にバインドされているコントローラはdisposeされます。
  
  • レスポンスにdata-h5-migrationを指定した要素があれば、<form>要素を削除する前に<form>が持っていた要素を代入させることができます。
  • data-h5-migrationに指定したセレクタに該当する要素を<form>から探して、見つかった要素でdata-h5-migration指定要素と差し替えます。
  • $lt;form>内に"h5-bind-target"を指定した要素があれば、その要素に受け取ったHTMLをバインドします。formは削除されません。
  • h5-bind-targetにはappend,prepend,updateのいずれかで属性値を指定します。
• h5-refresh-groupでグループ名を指定すると、同一のグループ名が指定されている他のフォームもsubmitします。
• h5-block-groupでグループ名を指定すると、同一のグループ名が指定されている他の要素にもインジケータを表示します。
  
  • h5-block-groupの指定がない場合はsubmitするフォームのみがブロックされます。
  • h5-block-group="screen"で全画面にインジケータを表示します。
  • h5-block-group="none"を指定した場合はインジケータを表示しません。
• <form>にtarget属性で他のフォームの名前(name属性の値)を指定すると更新対象のフォームを別のフォームにできます。
• <form>の送信に失敗した場合は、ApplicationController.failHandlerが実行されます。
  
  • デフォルトではログを出力し、通知を表示する関数が設定されています。
  • ApplicationController.failHandlerに自分で作成した関数を設定することができます。
  • failHandlerに渡される引数は、

    function failHandler(jqXHR, $form, controller){}

    のように引数を取ります。
    それぞれ、エラー時のjqXHRオブジェクト、エラーの発生したformのjQueryオブジェクト、ApplicationControllerインスタンスです。
  • failHandler内のthisはajaxリクエストの設定オブジェクトです。