前の記事の続き。
フォームに入力した内容を、最後に確認画面で出すための実装に挑戦した。
↓こんな感じで入力すると
こうなる。名前はいま食べてるお菓子からそのまま流用した。
入力内容の連携にはknockout.jsを使った。data-bindってやつ。
knockout.jsはダウンロードして、フォルダ構成が以下になるように配置。
- index.html(本記事のソースをコピペしただけのHTMLファイル)
- AdminLTE-3.0.2(フォルダ)
- css
- img
- js
- plugins
- knockout-3.5.1(フォルダ)
- knockout-3.5.1.js
ソースは以下。(クリックするとソースが表示されます)
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metahttp-equiv="x-ua-compatible"content="ie=edge"><title>テストページ</title><!-- Font Awesome Icons --><linkrel="stylesheet"href="AdminLTE-3.0.2/plugins/fontawesome-free/css/all.min.css"><!-- Theme style --><linkrel="stylesheet"href="AdminLTE-3.0.2/css/adminlte.min.css"><!-- Google Font: Source Sans Pro --><linkhref="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"rel="stylesheet"></head><body><divclass="split-input-form container-fluid"><divclass="Title">分割入力フォーム</div><divclass="docking"><divclass="docking-body p-3"><ulclass="nav nav-tabs"><liclass="nav-item"><ahref="#tab1-content"class="nav-link"data-toggle="tab">基本</a></li><liclass="nav-item"><ahref="#tab2-content"class="nav-link"data-toggle="tab">住所</a></li><liclass="nav-item"><ahref="#tab3-content"class="nav-link"data-toggle="tab">連絡先</a></li><liclass="nav-item"><ahref="#tab4-content"class="nav-link"data-toggle="tab">確認</a></li></ul><divclass="tab-content"><divid="tab1-content"class="tab-pane active"><div><span>基本の情報を入力します。</span></div><br/><divclass="font-weight-bold"style="margin: 10px 0px;">基本情報</div><div><span>あなたの名前と年齢を入力します。</span></div><br/><divclass="row form-group"><labelclass="col-xl-1 d-flex align-items-center">名前
</label><inputtype="text"data-bind="value: inputName, valueUpdate: 'input'"class="col-xl-11 form-control"id="InputName"placeholder="名前を入力"/></div><br/><divclass="row form-group"><labelclass="col-xl-1 d-flex align-items-center">年齢
</label><inputtype="text"data-bind="value: inputAge, valueUpdate: 'input'"class="col-xl-11 form-control"id="InputAge"placeholder="年齢を入力"/></div></div><divid="tab2-content"class="tab-pane"><div><span>あなたの住所を入力します。</span></div><br/><!-- general form elements --><divclass="row form-group"><labelfor="selectPrefectureLabel"class="col-xl-1 d-flex align-items-center">都道府県
</label><selectclass="form-control"data-bind="options: prefItems, value: selectedPref"id="selectPrefecture"></select></div><br/><divclass="form-group"><labelfor="selectAreaLabel"class="col-xl-1 d-flex align-items-center">地域
</label><divclass="custom-control custom-radio"><inputclass="custom-control-input"data-bind="checked: inputArea"type="radio"id="AreaRadioWest"name="AreaRadio"checked=""value="どちらかというと西"><labelfor="AreaRadioWest"class="custom-control-label">どちらかというと西
</label></div><divclass="custom-control custom-radio"><inputclass="custom-control-input"data-bind="checked: inputArea"type="radio"id="AreaRadioEast"name="AreaRadio"value="どちらかというと東"><labelfor="AreaRadioEast"class="custom-control-label">どちらかというと東
</label></div></div></div><divid="tab3-content"class="tab-pane"><div><span>希望する連絡手段を選んでください。(複数選択可能)</span></div><br/><divclass="form-group"><divclass="custom-control custom-checkbox"><inputclass="custom-control-input"data-bind="checked: inputContact"type="checkbox"id="customboxMobile"value="携帯電話"/><labelfor="customboxMobile"class="custom-control-label">携帯電話
</label></div><divclass="custom-control custom-checkbox"><inputclass="custom-control-input"data-bind="checked: inputContact"type="checkbox"id="customboxPhone"value="固定電話"/><labelfor="customboxPhone"class="custom-control-label">固定電話
</label></div><divclass="custom-control custom-checkbox"><inputclass="custom-control-input"data-bind="checked: inputContact"type="checkbox"id="customboxFax"value="FAX"/><labelfor="customboxFax"class="custom-control-label">
FAX
</label></div></div></div><divid="tab4-content"class="tab-pane"><div><span>入力した内容を確認します。以下でよろしいですか？</span></div><br/><divclass="form-group"><divclass="row"><labelclass="col-xl-1 d-flex align-items-center">名前
</label><pclass="col-xl-11"id="InputNameResult"data-bind="text: inputName"/></div><br/><divclass="row"><labelclass="col-xl-1 d-flex align-items-center">年齢
</label><pclass="col-xl-11"id="InputAgeResult"data-bind="text: inputAge"/></div><br/><divclass="row"><labelclass="col-xl-1 d-flex align-items-center">都道府県
</label><pclass="col-xl-11"id="InputPrefResult"data-bind="text: selectedPref"/></div><br/><divclass="row"><labelclass="col-xl-1 d-flex align-items-center">地域
</label><pclass="col-xl-11"id="InputAreaResult"data-bind="text: inputArea"/></div><br/><divclass="row"><labelclass="col-xl-1 d-flex align-items-center">連絡先
</label><pclass="col-xl-11"id="InputContactResult"data-bind="text: inputContact"/></div></div></div></div></div></div></div><!-- jQuery --><script src="AdminLTE-3.0.2/plugins/jquery/jquery.min.js"></script><!-- Bootstrap 4 --><script src="AdminLTE-3.0.2/plugins/bootstrap/js/bootstrap.bundle.min.js"></script><!-- AdminLTE App --><script src="AdminLTE-3.0.2/js/adminlte.min.js"></script><!-- knockout.js --><script src="knockout-3.5.1/knockout-3.5.1.js"></script><script>$(function(){varviewModel={//// 初期値は空文字//inputName:ko.observable(''),inputAge:ko.observable(''),prefItems:['北海道','本州','四国','九州'],selectedPref:ko.observable('北海道'),inputArea:ko.observable(''),inputContact:ko.observableArray()};ko.applyBindings(viewModel);});</script></body></html>
knockout.js、まだよくわかってないけどいい感じ。
今は入力フォームを監視して、入力された値を確認画面にそのまま反映してるだけで、まだ氷山の一角って感じ。
例えば、「基本」タブの「名前」を「姓」「名」って分ける修正をするときに、ViewModelだけ更新すればUIも動的に変わってくれるって使い方ができそう。
ていうか、それが主目的のライブラリなんだっけか････？
もうちょい勉強して、拡張しやすいコードに更新したいですね。
でも、今は先に進むことを考えよう････
次は、画面最下部にあるボタンの実装をやろう。
下の画面の「確認および作成」「＜前へ」「次：ディスク」 のとこね･･･
