読者です 読者をやめる 読者になる 読者になる

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 ));//$を使う他のライブラリとの共存のため