javascriptMVC入門 ちょっと脱線
早めに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(関連づけるエレメント)みたいに
HTMLエレメントを引数に指定します。
※のちほど３：でインスタンス生成を楽に書ける方法が出てきます。
＜ポイント＞
defaultsプロパティに定義されている値は、コントローラのインスタンス生成時にoptionsプロパティに初期値として設定されます。
ただし、インスタンス生成時にパラメータを指定した場合はそちらが優先されます。
また、インスタンス生成時に指定されたパラメータはdefaultsに定義されていなくてもoptionsに保持されます。
詳しくは下記のコードを見てください。
２：コントローラでのイベントバインド方法
JavaScriptMVCのコントローラは特定のHTMLエレメントと関連付けられます。
コントローラは関連付けられたHTMLエレメント（配下のエレメント含む）の
イベントを管理する役割を持っています。
イベントの登録はjQuery流に$('div').on('click' , function(){ /* event action*/} )などとしてもよいのですが、JavaScriptMVCでは宣言的にイベント登録を行うことが出来ます。
１：で出てきた以下のコードを再度見てみましょう。
"div click" : function(div, ev){~}これは、
１）コントローラに関連付けられたHTMLエレメント配下のdic要素に対し、
２）clickイベントを登録
をしています。書式は以下の通りです。
"[セレクタ] [イベント名]" : function(div, ev){~}下記の例ではclass="title"エレメントのtapholdイベントが登録されます。
".title taphold" : function(elm, ev){~}ちなみにイベントの第１引数にはイベント発生もとHTMLエレメントをラップしたjQueryオブジェクトが渡されます。
さらにここからがJavaScriptMVCらしいところ。
[セレクタ]、[イベント名]の部分をパラメータを使って動的に置き換えることが可能です。
例えば以下のように定義されているとします。
"{targetClassName} taphold" : function(elm, ev){~} {targetClassName}の部分は１：で説明したoptionsプロパティの内容で置き換えられます。
例えばoptions.targetClassNameに'li'が設定されていればliエレメントに対してtapholdイベントが登録されます。
defaultsと組み合わせれば再利用しやすい仕組みになりそうですね！！
詳細は本家ドキュメントのRapid Startが詳しいです。
英語読めない方でもソース例が豊富ですので雰囲気はつかめるかと思います。
３：追加されるjQueryヘルパーメソッド
コントローラのクラス定義を行うとjQueryヘルパーメソッドが追加されます。
ヘルパーメソッドはHTMLエレメントとコントローラの関連づけを楽に行えるようにしてくれます。
ヘルパーメソッドはコントローラのクラス名をもとに追加されます。
基本的にはクラス名を小文字＋アンダーライン区切りにしたものです。
１：の場合はmy_widgetという名前になります。
$.fnに対して追加されるため、
$(".selector").my_widget();
jQueryオブジェクトに対して利用できるようになっています。
上記の書き方は
new MyWidget( $(".selector"));
と書くのと同じです。
※コントローラのクラス名に名前空間を指定した場合は若干独特なルールが適用されます。
例えば、コントローラのクラス名が'SimpleMemo.Controllers.MemoWidget'
の場合は"simple_memo_memo_widget"という名前になります。
この辺は改めてまとめます。
以上です。
少しでも本家ドキュメントを読む助けになればうれしいです。
