debuggable

 
Contact Us
 

How to organize your CakePHP App’s Javascript II

Posted on 23/11/06 by Felix Geisendörfer

Deprecated post

The authors of this post have marked it as deprecated. This means the information displayed is most likely outdated, inaccurate, boring or a combination of all three.

Policy: We never delete deprecated posts, but they are not listed in our categories or show up in the search anymore.

Comments: You can continue to leave comments on this post, but please consult Google or our search first if you want to get an answer ; ).

Note: This post is ment for people who are using the best JS library around: jQuery. That said I think it would be easy to port it to any other library, but that would hurt my jQuery-evangelist heart, so please don't do it ; ).

This is a follow up to one of my previous posts called How to organize your CakePHP App’s Javascript. While the old solution was nice to manage the JS of a smaller application, this one is ment to structure your JS even in bigger projects. To make this possible I decided to go with a loose (MV)C pattern. The idea is this: Your global Javascript functions will all go in a JS class called SiteController. This object also has a function called registerController. By calling this function you register that new Controller's behaviors to be called up after the DOM has loaded.

Let's consider a little example:

var SiteController = new function()
{
    this.controllers = Array();
   
    this.initialize = function()
    {
        SiteController.Behaviors();
    }
   
    this.Behaviors = function()
    {
        var controllers = SiteController.controllers;
        controllers.push(this);

        $(controllers).each(function()
        {
            for (var fct in this.Behaviors)
            {
                if (typeof(this.Behaviors[fct])=='function' && !(Function[fct]))
                    this.Behaviors[fct]();
            }
        });
    }
   
    this.Behaviors.history = function()
    {
        $.historyInit(this.history.navigate);

        $('a[@rel=ahah]').click(function()
        {
            var hash = this.href;
            hash = hash.replace(/^.*#/, '');

            $.historyLoad(hash);
            return false;
        });
    }
   
    this.Behaviors.history.navigate = function(hash)
    {
        if(hash)
            $("#ahah-container").load('ahah/'+hash+'.html');
        else
            $("#ahah-container").load('ahah/home.html');
    }
   
    this.registerController = function(Controller)
    {
        SiteController.controllers.push(Controller);
    }
}

$(document).ready(SiteController.initialize);

Ok, this SiteController consists out of the Behaviors function known from Part I and the new registerController function. The other JS code you see in there make use of the excellent jQuery AJAX history plugin in order to enable the back button for links with rel="ahah" (what is AHAH?). This is considered to be all globally avaible functionality we need for our project. Now let's add a little CalendarController to see how it fits in:

var CalendarController = new function()
{
    this.Behaviors = function() {}
   
    this.Behaviors.setupCalendar = function()
    {
        $('#calendar').show('fast').click(CalendarController.click);
    }
   
    this.click = function()
    {
        alert(new Date());
    }
}

SiteController.registerController(CalendarController);

I think the code should be pretty self-explanatory. This CalendarController unhides a hidden element with the id "calendar" (it's JS only) and than attaches a useless click event to it that will alert the current date ; ).

Now combine this technique with my Include only the JS you really need post and you've got yourself a very simple, yet elegant way to bring some structure to your javascript code.

Dislamer: I'm no Javascript expert. So in case I messed something up I'd be more then happy to hear about it in the comments. Oh and of course I'd also love to hear any other criticism / thoughts on it.

-- Felix Geisendörfer aka the_undefined

 

(Theoretically) Related Posts

&nsbp;

You can skip to the end and add a comment.

Comments 4 Comments   |   Add Comment Add Comment
Ben Hirsch said on Dec 16, 2006:

Long time, no post ;)

Brandon P  said on Dec 16, 2006:

Felix, still alive?! :)

Felix Geisendörfer said on Dec 16, 2006:

Yeah, I'm still alive. The reason I haven't doing any posting is that I've not been doing much CakePHP (besides some work for the foundation, but that'll be a surprise). My current job makes me doing HTML/CSS and lot's of JS all day long right now. Let me do a little post on the blog to explain it ... ; )

Minh  said on Feb 06, 2007:

Hey Felix,

I copied your SiteController and CalendarController to do some testing. Here's my HTML.

calendar

When I click on that nothing happen. I'm using the latest JQuery library(1.1.1).

This post is too old. We do not allow comments here anymore in order to fight spam. If you have real feedback or questions for the post, please contact us.