6.2. 変数の双方向バインディング¶
6.2.1. 概要¶
IM-BloomMaker の変数はエレメントの値と変数の値が双方向に結び付けられます。
このエレメントと変数が同期する動作を「双方向バインディング」と呼び、IM-BloomMaker ではエレメントの操作をすべて変数を経由して行います。この仕組みを利用することで以下のようなメリットがあります。
- 編集可能なテキスト入力と表示専用のラベルを切り替えたい場合、同じ変数を使用することで、表示内容を同一にしつつ、編集可否を実現できます。
- テキスト入力で入力された文字列によって、他の部品の状態（表示可否など）を変更したい場合、変数で条件式を作成することで、コーディングを行うことなく実現できます。
- 画面の仕様変更などで、後から部品の入れ替えがありIDが変わっても、変数が変わらなければビジネスロジックを修正する必要はありません。
- 変数の値が配列の場合、配列の件数分の表示部品を自動的に追加します。配列の件数に応じて部品を手動で増やしたり減らしたりする手間がありません。
- 必要なエスケープ処理などは IM-BloomMaker が自動で行うため、意識しなくてもセキュリティ脆弱性を防止します。
このように、IM-BloomMaker では画面上のすべての動的な変化を、変数の操作によって行うため、画面上の部品と値をやりとりするためのコーディングが不要です。
図：双方向バインディング
注意
IM-BloomMaker 上では、セキュリティの関係上 document.getElementById のようなブラウザ標準の API で DOM を取得し、直接操作することはできません。
6.2.2. 具体的な例¶
6.2.2.1. 定義ファイルのインポート¶
本チュートリアルを開始する前に以下のリンクから、IM-BloomMaker の定義ファイルをダウンロードし、インポートを行ってください。
コンテンツ定義「チュートリアルガイド」-「双方向バインディングチュートリアル」を開いてください。
6.2.2.2. エレメント ⇒ 変数¶
ユーザ入力などでエレメントの状態が変化すると、プロパティに設定された変数の値が自動的に変わります。
チュートリアル用のコンテンツでは、上側のテキスト入力に変数 $variable.key1 が設定されています。
プレビュー画面を開き、以下のように操作してみます。
上側のテキスト入力に、任意の文字列を入力します。
図：テキストの入力
図：「GET」ボタンテキスト入力に入力した文字列が、ダイアログに表示されることが確認できました。
図：ダイアログの表示
このように、テキスト入力などのエレメントで入力値を取得したい場合、エレメントから直接取得せず、変数の値を参照します。
6.2.2.3. 変数 ⇒ エレメント¶
エレメントのプロパティに変数を指定している場合、変数の値を書き換えるとエレメントが再描画され表示状態が変化します。
そのため、エレメントの状態を変化させるには、変数の値を書き換えます。
チュートリアル用のコンテンツでは、上側のテキスト入力に変数 $variable.key1、下側のテキスト入力とラベルに変数 $variable.key2 が設定されています。
プレビュー画面を開き、以下のように操作してみます。
上側のテキスト入力に、任意の文字列を入力します。
図：テキストの入力「SET」ボタンをクリックします。変数 $variable.key1 の変数値が $variable.key2 に代入されます。
図：「SET」ボタン下側のテキスト入力とラベルに、入力した文字列が表示されることが確認できました。
図：下側のテキスト入力とラベル
このように、テキスト入力などのエレメントの表示内容を変更したい場合、エレメントへ直接文字列を設定せず、変数へ値を代入します。
6.2.2.4. 複数のエレメントの連動¶
複数のエレメントのプロパティに同じ変数を指定している場合、変数の値を書き換えると対象のエレメントが再描画され表示内容が同期します。
チュートリアル用のコンテンツでは、下側のテキスト入力とラベルに変数 $variable.key2 が設定されています。
プレビュー画面を開き、以下のように操作してみます。
下側のテキスト入力に、任意の文字列を入力します。
図：テキストの入力テキスト入力に入力した文字列が、右隣のラベルに表示されることが確認できました。
図：ラベルの表示
このように、複数のエレメントで同一の表示内容を表示したい場合、変数を使用することで一切コーディングを行うことなく実現できます。
入力値変更時（onChange）などのイベントを設定する必要もありません。