Site:Frontend:Controllers

Introduction

A Controller is a javascript class used to organize all javascript functionality within a particular page or module. A controller can hold other controllers, so you can imagine a site controller managing all of the page controllers.

This class is broken down by functionality and should only be instantiated when necessary.

Basic Site Controller

 <script type="text/javascript">
   function siteController(authUser, publicUser, publicContentId) {
     this.authUser   = authUser;
     this.publicUser = publicUser;
     this.contentId  = publicContentId;
     this.urls = [];
   }
 
   siteController.prototype.registerUrls = function(urls) {
     this.urls = urls;
   };
 
   siteController.prototype.registerProfileFunctions = function() {
     var myThis = this;
 
     $('#getUserState').click(function(e) {
       e.preventDefault();
       $.ajax({
         type: 'get',
         url:  myThis.urls['userStateUrl'],
         data: {
           'user': myThis.publicUser
         },
         success: function(data) {
           alert('This user is '+ data.state);
         }
       });
     });
   };
 </script>

Instantiating

In the example controller, siteController is instantiated with the authenticated username, the public username, and the public contentId which are stored so they can be accessed throughout the class.

 <script type="text/javascript">
   var site = new siteController('Justin', 'Roy', '');
   $(document).ready(function() {
     site.registerUrls({
       'userStateUrl' : 'http://example.com/userstate'
     });
   });
 </script>

Using registerProfileFunctions

In the example above, we never called the registerProfileFunctions function, meaning the getUserState listener is never active.

Example

 site.registerProfileFunctions();

Once its active and getUserState is clicked, the script references myThis.urls['userStateUrl'] which was set earlier in the registerUrls function.