The idea here is that a single 'Page' object would manage the various defined classes that handle interaction on the page. When 'domready' fires, the Controllers object would do a set of searches for each known controller and establish an object for each element that matches the $$ query. For instance all elements with the CSS class 'JS_Calendar' would be controlled by corresponding objects derived from the Page.Calendar class.
/*
Class: Controllers
This is a namespace for all the classes that control interactive behavior on the
page. It also manages event messaging so that controllers can communicate with
each other.
*/
var Controllers = new Class({
Implements: Events,
initialize: function(cssPrefix) {
this.controllers = [];
window.addEvent('domready', this.initializeControllers.bind(this, cssPrefix));
},
initializeControllers: function(cssPrefix) {
// After the page loads, search for elements with particular CSS classes
// that correspond to JavaScript behavior controllers.
for (property in this) {
if ($type(this[property]) != 'class') {
continue;
}
dbug.log(property);
$$('.' + cssPrefix + property).each(function(el) {
try {
var Controller = this[property];
this.controllers.push(new Controller(el, this));
} catch(e) {
dbug.log(e.message);
}
}.bind(this));
}
this.fireEvent('onInitialize');
}
});
dbug.enable();
var Page = new Controllers('JS_');
// In another file, calendar.js
Page.Calendar = new Class({
initialize: function(el, page) {
// ...
}
});
Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1306"></script>
