monster.ui.insertTemplate()

Syntax

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

Parameters

Key	Description	Type	Default	Required
target	Insert the template at the end of the target element	jQuery		true
template	Either a jQuery object representing a template or a function providing a callback that will receive the template to insert in the target.	jQuery	Function
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 giving you the power to have the same animations when inserting a template in the DOM.

When template is a function, a loading template will be rendered until the callback is invoked.

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, 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
    })
  });
});