Skip to content

monster.ui.insertTemplate()#

Syntax#

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

Parameters#

Key Description Type Default Required
target Insert the template at the end of the target element jQuery true
callback A function that exposes the helper's callback that will receive the template to insert in the target. Function true
options List of options to customize the loading view. Object(#/options) false

options#

Key Description Type Default Required
title Title displayed in the loading view. String false
text Text displayed in the loading view. String false
duration Duration of the fadeIn animation for the inserted template. Number 250 false
cssClass Custom CSS classes for the loading view. String app-content false
cssId Custom CSS id for the loading view. String false
hasBackground Show the loading spinner/text/title without any background if set to false (overridden by cssClass). Boolean true false

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:#

function initTempate() {
  var template = $(app.getTemplate({
    name: 'myTemplate'
  }));

  // bind events, initialize widget (tooltips, datepickers...)

  return template;
}

monster.ui.insertTemplate($target, function(callback) {
  callback(initTemplate());
});

Insert a template that need data from requests:#

function initTempate(results) {
  var template = $(app.getTemplate({
    name: 'myTemplate',
    data: results
  }));

  // bind events, initialize widget (tooltips, datepickers...)

  return template;
}

monster.ui.insertTemplate($target, function(callback) {
  monster.parallel({
    listUsers: function() {
      // retrieve users
    },
    getAccount: function() {
      // retrieve account
    }
  }, function(err, results) {
    //feed the data to your template and insert it
    callback(initTemplate(results), function() {
      // this callback will executed once the template is in the DOM
    }, function() {
      // this callback will executed once the insertion animation is done
    })
  });
});