早めにJavaScriptMVCの記事まとめたいんですが、
時間作るのって覚悟とやる気が必要だと痛感してます、、、
さて、今日はちょっと脱線して、JavaScriptMVCのチュートリアルや
サンプルを読み進める上でのポイントを解説しておきます。
JavaScriptMVCの中でも特徴があるのがコントローラの部分です。
コントローラのポイントとして、
１：コントローラのdefaultsとoptionsプロパティ
２：コントローラでのイベントのバインド方法
３：追加されるjQueryヘルパーメソッド
くらいを押さえておけば処理の流れは追えます。
※ちなみにJavaScriptMVCでのjQuery拡張であるjQueryMXを使う前提です。
JavaScriptMVC自体はjQueryとは独立で利用可能です。
では順番に説明します。
１：コントローラのdefaultsとoptionsプロパティ
本家ドキュメントの「Using Controller」の部分にあるサンプルで解説します。
ドキュメントでは以下のソースが掲載されています。
順に見ていきましょう。$.Controllerというのがコントローラのクラス定義です。
３つの引数を渡していますね。
$.Controller("①クラス名",{/*②Static*/} ,{/*③ProtoType*/})①はクラス名となります。サンプルでは"MyWidget"ですね。
後で触れるjQueryヘルパーメソッドに関わる部分です。
②はStaticメンバーの定義となります。defaultsプロパティが定義されていますね。
③はProtoTypeメンバーです。initメソッドと、何やら見慣れぬ
"div click" : function(div, ev){~}というメソッド定義らしきものがありますね。
これは２：でイベントバインドの説明する時に詳しく見ていきます。
initメソッドは定義しておけばインスタンス生成時にコールされます。
※実はsetupという似たようなメソッドもあるんですが割愛。ドキュメント読んでね。
これでコントローラのクラス定義完了です。
インスタンス生成時は new MyWidget(関連づけるエレメント)みたいに
＜ポイント＞
defaultsプロパティに定義されている値は、コントローラのインスタンス生成時にoptionsプロパティに初期値として設定されます。
ただし、インスタンス生成時にパラメータを指定した場合はそちらが優先されます。
また、インスタンス生成時に指定されたパラメータはdefaultsに定義されていなくてもoptionsに保持されます。
詳しくは下記のコードを見てください。
２：コントローラでのイベントバインド方法
JavaScriptMVCのコントローラは特定のHTMLエレメントと関連付けられます。
コントローラは関連付けられたHTMLエレメント（配下のエレメント含む）の
イベントを管理する役割を持っています。
イベントの登録はjQuery流に$('div').on('click' , function(){ /* event action*/} )などとしてもよいのですが、JavaScriptMVCでは宣言的にイベント登録を行うことが出来ます。
１：で出てきた以下のコードを再度見てみましょう。
"div click" : function(div, ev){~}"[セレクタ] [イベント名]" : function(div, ev){~}".title taphold" : function(elm, ev){~}"{targetClassName} taphold" : function(elm, ev){~} $(".selector").my_widget();
new MyWidget( $(".selector"));
