前回は、ビューとビューコントローラーを使って、処理を分割してみました。今度は、ビューモデルについてです。 ビューからロジックを切り離すのが、ビューコントローラーの役割なのであれば、ビューから値の管理を切り離すのがビューモデルです。
では、早速やってみましょう。
ビューモデルを使った値のバインディング
まず、普通にビューに、テキストフィールドを配置します。テキストフィールドは、Ext.form.field.Textで定義されています。
|
1 2 3 4 5 6 7 8 9 |
items: [{ xtype: 'textfield', reference: 'mytextfield', bind: '{mytextfield}' }, { xtype: 'button', text: 'マイボタン', handler: 'onClickMyButton' }] |
前回のマイボタンの前に1個追加してあげましょう。あ、あと、Mainクラスの継承元をフォームパネルextend: ‘Ext.form.Panel’に変更しました、まだフォームパネルの機能を使うわけじゃないんですが、とりあえずフィールド突っ込むならフォームパネルと。
まず、reference: ‘mytextfield’というのが新しい設定ですかね。これは、プログラム上からこのテキストフィールドを取得するための手段の1つです。とりあえず、名前(‘mytextfield’)を設定します。
処理は、ビューコントローラーで行います、前回のonClickMyButtonを書き換えます。
直接テキストフィールドの値を書き換える
ビューコントローラーのイベントハンドラを下記のように記述します。
|
1 2 3 |
onClickMyButton: function(btn) { this.getReferences().mytextfield.setValue("123"); } |
このthis.getReferences()というメソッドが初登場ですね。先ほど設定した、referenceの名前をキーとして、コンポーネントオブジェクトを取得することができます。setValueは、テキストフィールドのメソッドで値を設定することができます。
この後使う、ビューモデルも一応作ります、このタイミングでは利用してないんですが、次の項目で使います。MainビューにviewModel: ‘main’を設定しています、ビューコントローラーの時と同じ臭いがしますね。そして、MainModel.jsをMainビューと同じディレクトリに作成します。
|
1 2 3 4 5 6 7 |
Ext.define('MyApp.view.main.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', data: { mytextfield: "" } }); |
dataのところに、mytextfieldと記述しておきましょう。
ここまでの完成形が、下記になります。
ビューモデルを介した値の設定
さて、ビューモデルを作成して、Mainビューで使うよと設定したのに、使って無かったので使って行きましょう。その前に、なぜビューモデルなんて使わなくちゃいけないんだ？ということをちょっとだけ考えてみましょう。
先ほどの状態は、ビュー（コンポーネント）に対して、直接setValueして値を突っ込んでました。これは、ビューと値の設定関係を、ビューの中だけでやっていることになります。コイツを切り離してやろう、というのがビューモデルの役割ですね。
先ほど、説明をスルーしたんですが、bind: ‘{mytextfield}’とう設定がありました。こいつが、ビューモデルと連携するポイントになります。bindに設定した‘{XXXXXX}’ の名前で、ビューモデルの値と連動できるようになります。
実は、バインド設定は終わっていたということで（まとめて書いちゃっただけなんだけど）、先ほどイベントハンドラで、値をビュー（コンポーネント）に直接入れていた部分を、ビューモデルに対してデータをいれるように修正します。
|
1 2 3 |
onClickMyButton: function(btn) { this.getViewModel().set('mytextfield', 'from view model!'); } |
this.getReferences()だった部分が、this.getViewModel()になり、setメソッドで何か値を設定しています。setの第一引数は、先ほどbindで設定した名前で、第二引数に値を設定します。
完成した物が以下になります。
終わりに
setValueで値を設定しても、ビューモデルに値を設定しても値が表示されました。ビューモデルがないときは、setValueで一生懸命値を設定していってたんですが、これだけみると、大差ないですよね？値ぶち込んでるだけでしょ？って。
まず、ビューから値設定を切り離せたことが大きなポイントです。 ビューコントローラーは、ビュー（コンポーネント）を意識することなく、ビューモデルのデータを書き換えることだけ考えればよいのです。そのビューモデルのデータをビューのどこが使うのかは、bindでビューに設定されたところが勝手に使います。
また、bindは複数していもできますし、bindされる値を参照して動的な設定も可能です。ビューモデルも奥が深そうですねぇ、いや実際便利なんですよ。
ビュー・ビューコントローラー・ビューモデル、こうやってそれぞれの依存性を薄くしてあげることで、柔軟なプログラミングが可能になるとともに、コード量も減らすことができます。すんごい単純な、MVVMをみてみましたが、どうだったでしょうか。これだけなら難しくないんでしょ？ちょっとできた気になってもらえたでしょうか。
さて、次回は、ここまで何気なくコンフィグオプションを使って、クラスを作ったり、設定をしたりしてきた、Ext.defineについて見ていきましょう。
