Subscribed unsubscribe Subscribe Subscribe

javascriptMVC入門 ちょっと脱線

早めにJavaScriptMVCの記事まとめたいんですが、

時間作るのって覚悟とやる気が必要だと痛感してます、、、

 

さて、今日はちょっと脱線して、JavaScriptMVCのチュートリアルや

サンプルを読み進める上でのポイントを解説しておきます。

 

JavaScriptMVCの中でも特徴があるのがコントローラの部分です。

コントローラのポイントとして、

  1:コントローラのdefaultsとoptionsプロパティ

  2:コントローラでのイベントのバインド方法

  3:追加されるjQueryヘルパーメソッド

くらいを押さえておけば処理の流れは追えます。

※ちなみにJavaScriptMVCでのjQuery拡張であるjQueryMXを使う前提です。

JavaScriptMVC自体はjQueryとは独立で利用可能です。

 

では順番に説明します。

 

1:コントローラのdefaultsとoptionsプロパティ

本家ドキュメントの「Using Controller」の部分にあるサンプルで解説します。

ドキュメントでは以下のソースが掲載されています。 

 

順に見ていきましょう。$.Controllerというのがコントローラのクラス定義です。

3つの引数を渡していますね。

$.Controller("クラス名",{/*②Static*/} ,{/*③ProtoType*/})

 ①はクラス名となります。サンプルでは"MyWidget"ですね。

後で触れるjQueryヘルパーメソッドに関わる部分です。

  

 ②はStaticメンバーの定義となります。defaultsプロパティが定義されていますね。

 ③はProtoTypeメンバーです。initメソッドと、何やら見慣れぬ

"div click" : function(div, ev){~}

というメソッド定義らしきものがありますね。

これは2:でイベントバインドの説明する時に詳しく見ていきます。

 

initメソッドは定義しておけばインスタンス生成時にコールされます。

※実はsetupという似たようなメソッドもあるんですが割愛。ドキュメント読んでね。

 

これでコントローラのクラス定義完了です。

インスタンス生成時は new MyWidget(関連づけるエレメント)みたいに

HTMLエレメントを引数に指定します。
※のちほど3:でインスタンス生成を楽に書ける方法が出てきます。

 

<ポイント>

defaultsプロパティに定義されている値は、コントローラのインスタンス生成時にoptionsプロパティに初期値として設定されます。

ただし、インスタンス生成時にパラメータを指定した場合はそちらが優先されます。

また、インスタンス生成時に指定されたパラメータはdefaultsに定義されていなくてもoptionsに保持されます。

詳しくは下記のコードを見てください。

 

 

 

 

 

 2:コントローラでのイベントバインド方法

JavaScriptMVCのコントローラは特定のHTMLエレメントと関連付けられます。

コントローラは関連付けられたHTMLエレメント(配下のエレメント含む)の

イベントを管理する役割を持っています。

 

イベントの登録はjQuery流に$('div').on('click' , function(){ /* event action*/} )などとしてもよいのですが、JavaScriptMVCでは宣言的にイベント登録を行うことが出来ます。

1:で出てきた以下のコードを再度見てみましょう。

"div click" : function(div, ev){~}
これは、
  1)コントローラに関連付けられたHTMLエレメント配下のdic要素に対し、
  2)clickイベントを登録
をしています。書式は以下の通りです。
"[セレクタ] [イベント名]" : function(div, ev){~}
[セレクタ]部分にはjQueryで利用しているセレクタを記載できます。
下記の例ではclass="title"エレメントのtapholdイベントが登録されます。
".title taphold" : function(elm, ev){~}
ちなみにイベントの第1引数にはイベント発生もとHTMLエレメントをラップしたjQueryオブジェクトが渡されます。
 
さらにここからがJavaScriptMVCらしいところ。
[セレクタ]、[イベント名]の部分をパラメータを使って動的に置き換えることが可能です。
例えば以下のように定義されているとします。
"{targetClassName} taphold" : function(elm, ev){~} 
{targetClassName}の部分は1:で説明したoptionsプロパティの内容で置き換えられます。
例えばoptions.targetClassNameに'li'が設定されていればliエレメントに対してtapholdイベントが登録されます。
defaultsと組み合わせれば再利用しやすい仕組みになりそうですね!!
 
詳細は本家ドキュメントのRapid Startが詳しいです。
英語読めない方でもソース例が豊富ですので雰囲気はつかめるかと思います。
 
 
 
3:追加されるjQueryヘルパーメソッド
コントローラのクラス定義を行うとjQueryヘルパーメソッドが追加されます。
ヘルパーメソッドはHTMLエレメントとコントローラの関連づけを楽に行えるようにしてくれます。
ヘルパーメソッドはコントローラのクラス名をもとに追加されます。
基本的にはクラス名を小文字+アンダーライン区切りにしたものです。
1:の場合はmy_widgetという名前になります。
 
$.fnに対して追加されるため、
$(".selector").my_widget();
jQueryオブジェクトに対して利用できるようになっています。
上記の書き方は
new MyWidget( $(".selector"));
と書くのと同じです。
 
※コントローラのクラス名に名前空間を指定した場合は若干独特なルールが適用されます。
例えば、コントローラのクラス名が'SimpleMemo.Controllers.MemoWidget'
の場合は"simple_memo_memo_widget"という名前になります。
この辺は改めてまとめます。
 
以上です。
少しでも本家ドキュメントを読む助けになればうれしいです。