Site:Frontend:Controllers
From Metrixstream
(Difference between revisions)
MetrixJustin (Talk | contribs) (→Instantiating) |
MetrixJustin (Talk | contribs) (→Basic Site Controller) |
||
Line 4: | Line 4: | ||
= Basic Site Controller = | = Basic Site Controller = | ||
− | |||
− | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 50: | Line 48: | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
+ | == Using registerProfileFunctions == | ||
+ | |||
+ | In the example above, we never created an instance of registerProfileFunctions 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. |
Revision as of 10:56, 20 June 2012
Contents |
Introduction
A Controller is a javascript class that will manage all the necessary javascript. 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 created an instance of registerProfileFunctions 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.