Classes / Ladybug.Module

EXTENDS

Ladybug.Class

OVERVIEW

When you are building apps with Ladybug.js you'll need at least two things: an Application object and some Modules.

A module represents a section on your application, it has some templates ready for rendering and knows which events to bind when the DOM is ready.

You may have for example, Home, Contact and Login modules each one with its own functionality and logic.

The modules are loaded automatically when the Router finds a match, so if you navigate to #/contact the Contact module will be loaded, and so on.

BASIC USAGE

To create a module, extend this class and implement at least the OnDomReady, onRender and onPrepareTemplates methods.

// Declare our module
ModuleHome = Ladybug.Module.extend({
    init: function(options) {
        var obj = this;
        // Call parent's constructor
        obj._super(options);
    },
    onDomReady: function(params) {
        // Bind events and stuff
    },
    onRender: function(params) {
        var obj = this;
        app.element.html( obj.templates.page() );
    },
    onPrepareTemplates: function(params) {
        var obj = this;
        obj.templates.page = Ladybug.Utils.compileTemplate('#page-home');
    }
});

// Then register the module in your application
app.registerModule('home', new ModuleHome);

CLASS METHODS

function init(options)

Initization callback, this is run by the constructor

Available options

  • onInit Module initialization callback
  • onRender Module rendering callback
  • onDomReady Document-ready callback
  • onTitleRequest Title request callback
  • onPrepareTemplates Template compilation callback
  • templates Hash of compiled templates
  • partials Hash of compiled partials

function title()

Title request function, called internally by the Application object, runs the onTitleRequest callback and returns the result.


function render(params)

Rendering request function, called internally by the Application object, runs the onPrepareTemplates, onRender and onDomReady callbacks in order to make sure the module renders its templates and binds its listeners correctly.

Available parameters

  • params Array with the tokenized request from the Router

function onInit(params)

Module initialization callback, this is called when the module is loaded.

You may use this callback to initialize the module properties.

Available parameters

  • params Array with the tokenized request from the Router

function onRender(params)

Module rendering callback, this is called when the module needs to be rendered on the screen.

Available parameters

  • params Array with the tokenized request from the Router

Code sample

Render a simple template

onRender: function(params) {
    var obj = this;
    app.element.html( obj.templates.page() );
}

function onDomReady(params)

Document-ready callback, this is called when the module has finished its rendering to the browser.

Available parameters

  • params Array with the tokenized request from the Router

Code sample

Show an alert when the module has finished rendering

onDomReady: function(params) {
    alert('You are home');
}

function onPrepareTemplates()

Template compilation callback, this is called when the module is ready to compiled its templates.

Code sample

Compile a simple template from an existing page element and add it to the templates hash.

onPrepareTemplates: function() {
    var obj = this;
    obj.templates.page = Ladybug.Utils.compileTemplate('#page-home');
}

function onTitleRequest()

Title request callback, this is called when the app requests the module a title for the browser window. Just return the desired title.

Code sample

Return a title

onTitleRequest: function() {
    return 'My awesome app - Home';
}

See Ladybug.Class for inherited class methods.

CLASS MEMBERS

templates

Hash with compiled templates


partials

Hash with compiled partials


renderFlags

Not used


See Ladybug.Class for inherited class members.

Go back to previous page