

monster.ui.insertTemplate()#

Syntax#

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

Parameters#

Key	Description	Type	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
    })
  });
});