rafamvc/<controller_name>.js

## <controller_name>.js
// On the page specific file:
// "<controller_name>.js", and you import it after the init.js on your application.js
// Replace the <controller_name> with the actual name

RELASPHERE.<controller_name> = {
  init: function() {
     // Your shared code for the whole controller goes here
   },
  index: function() {
    // Your code for the index page goes here
  },
  edit: function() {
    // Your code for the edit page goes here
  }
}

## _readme
Where you see RELASPHERE you should use MY_APP on the controller_name.js. Somehow github doesnt let me edit that file because of the name.

## application.html.erb
<html>
<body data-controller="<%= controller_name %>" data-action="<%= action_name %>" class='<%= controller_name %>'>
</body>
</html>

## bcontroller_name.js
// On the page specific file:
// "<controller_name>.js", and you import it after the init.js on your application.js
// Replace the <controller_name> with the actual name

MY_APP.<controller_name> = {
  init: function() {
     // Your shared code for the whole controller goes here
   },
  index: function() {
    // Your code for the index page goes here
  },
  edit: function() {
    // Your code for the edit page goes here
  }
}

## controller_name.js
// On the page specific file:
// "<controller_name>.js", and you import it after the init.js on your application.js
// Replace the <controller_name> with the actual name

MY_APP.<controller_name> = {
  init: function() {
     // Your shared code for the whole controller goes here
   },
  index: function() {
    // Your code for the index page goes here
  },
  edit: function() {
    // Your code for the edit page goes here
  }
}

## init.js
// This global variable will hold all your page specific functions
// I know that global vars suck, but I think this is a good and safe exception
MY_APP = {
};

UTIL = {
  exec: function( controller, action ) {
    var ns = MY_APP,
        action = ( action === undefined ) ? "init" : action;

    if ( controller !== "" && ns[controller] && typeof ns[controller][action] == "function" ) {
      ns[controller][action]();
    }
  },

  init: function() {
    var body = document.body,
        controller = body.getAttribute( "data-controller" ),
        action = body.getAttribute( "data-action" );

    UTIL.exec( controller );
    UTIL.exec( controller, action );
  }
};

$( document ).ready( UTIL.init );
	// On the page specific file:
	// "<controller_name>.js", and you import it after the init.js on your application.js
	// Replace the <controller_name> with the actual name

	RELASPHERE.<controller_name> = {
	init: function() {
	// Your shared code for the whole controller goes here
	},
	index: function() {
	// Your code for the index page goes here
	},
	edit: function() {
	// Your code for the edit page goes here
	}
	}
	<html>
	<body data-controller="<%= controller_name %>" data-action="<%= action_name %>" class='<%= controller_name %>'>
	</body>
	</html>
	// This global variable will hold all your page specific functions
	// I know that global vars suck, but I think this is a good and safe exception
	MY_APP = {
	};

	UTIL = {
	exec: function( controller, action ) {
	var ns = MY_APP,
	action = ( action === undefined ) ? "init" : action;

	if ( controller !== "" && ns[controller] && typeof ns[controller][action] == "function" ) {
	ns[controller][action]();
	}
	},

	init: function() {
	var body = document.body,
	controller = body.getAttribute( "data-controller" ),
	action = body.getAttribute( "data-action" );

	UTIL.exec( controller );
	UTIL.exec( controller, action );
	}
	};

	$( document ).ready( UTIL.init );