Skip to content

monster.ui.insertTemplate()#

Syntax#

monster.ui.insertTemplate(target, callback[, options]);

Parameters#

target: jQuery Object (mandatory)#

Insert the template at the end of the target element.

callback: Function (mandatory)#

A function that exposes the helper's callback that will receive the template to insert in the target.

options: Object (optional)#

List of options to customize the loading view:

  • title: String (optional) - title displayed in the loading view
  • text: String (optional) - text displayed in the loading view
  • duration: Number (optional, default: 250) - duration of the fadeIn animation for the inserted template
  • cssClass: String (optional, default: app-content) - custom CSS classes for the loading view
  • hasBackground: Boolean (optional, default: true) - show the loading spinner/text/title without any background if set to false (overridden by cssClass)

Description#

The monster.ui.insertTemplate() method is a handy helper that gives developers the power to have the same animations when inserting a template in the DOM, but most of all, automatically detects if a request is in progress and add a loading template if it is the case.

Examples#

  • Insert a template that does not need data from requests:

    var self = this,
        initTemplate = function initTemplate() {
            var template = $(monster.template(self, 'myTemplate'));
    
            // bind events, generate custom elements (tooltips, datepickers ...)
    
            return template;
        };
    
    monster.ui.insertTemplate($target, function(callback) {
        callback(initTemplate());
    });
    

  • Insert a template that need data form requests:

    var self = this,
        initTemplate = function initTemplate(results) {
            var template = $(monster.template(self, 'myTemplate', results));
    
            // bind events, generate custom elements (tooltips, datepickers ...)
    
            return template;
        };
    monster.ui.insertTemplate($target, function(callback) {
        monster.parallel({
            listUsers: function() {
                // retrieve users
            },
            getAccount: function() {
                // retrieve account data
            }
        }, function(err, results), {
            // feed the data to your template
            callback(initTemplate(results), function() {
                // this callback will be executed once the template is in the DOM
            });
        });
    });