jQueryベースのJavaScript用MVCフレームワークcorMVCのチュートリアル
jQueryをベースとしたいわゆるMVCフレームワークであるcorMvcのチュートリアルが公開されています。
corMVCはまだリリースしたてでドキュメントなどがない状態なのでありがたいですね。
ルーティングなどはかなり見慣れた形式で、なかなか使いやすそうです。
// コントローラーの設定 window.application.addController((function( $, application ){ // クラス定義 function Controller(){ //ルーティング this.route( "/", this.index ); this.route( "/contacts/", this.index ); this.route( "/contacts/add/", this.addContact ); this.route( "/contacts/edit/:id", this.editContact );//<a href="#/contacts/delete/{削除対象のID}" class="delete">delete</a>というアクセスができる this.route( "/contacts/delete/:id", this.deleteContact ); // デフォルトの設定 this.currentView = null; this.contactListView = null; this.contactFormView = null; }; // JavaScript式継承. Controller.prototype = new application.Controller(); //初期化関数の定義 Controller.prototype.init = function(){ this.contactListView = application.getView( "ContactList" ); this.contactFormView = application.getView( "ContactForm" ); }; /*イベントの設定*/ Controller.prototype.addContact = function( event ){ // Show the form view. this.showView( this.contactFormView, event ); }; Controller.prototype.editContact = function( event, id ){ // ビューを表示 this.showView( this.contactFormView, event ); }; Controller.prototype.deleteContact = function( event, id ){ // コンタクトを削除 application.getModel( "ContactService" ).deleteContact( id, function(){ application.relocateTo( "contacts" ); } ); }; Controller.prototype.index = function( event ){ this.showView( this.contactListView, event ); }; Controller.prototype.showView = function( view, event ){ if (this.currentView && this.currentView.hideView){ this.currentView.hideView(); } //ビューに値を投げる view.showView( event.parameters ); // Store the given view as the current view. this.currentView = view; }; // ----------------------------------------------------------------------- // // ----------------------------------------------------------------------- // // インスタンスを返す return( new Controller() ); })( jQuery, window.application ));//$を使う他のライブラリとの共存のため