Skip to content

monster.template()#

Syntax#

monster.template(thisArg, name[, data, raw, ignoreCache, ignoreSpaces]);

Parameters#

thisArg: Object (mandatory)#

this of the app, used for finding the template to load

name: String (mandatory)#

name of the template, without the file extension

data: Object (optional, default: {})#

data to pass to the template

raw: Boolean (optional, default: false)#

when set to true, Handlebars will not compile the template and it will be sent as is

ignoreCache: Boolean (optional, default: false)#

when set to true, request the template even if it was already loaded

ignoreSpaces: Boolean (optional, default: false)#

when set to true, carriage return, linefeed, tab, whitespace will not be trimmed from the template

Description#

The monster.template() method allows you to request templates simply by specifying the name of the desired template. You can also pass data to the template with the data parameter.

Examples#

  • Load template with no data into the DOM
    var app = {
        render: function(parent) {
            var self = this,
                template = $(monster.template(self, 'app'));
    
            parent
                .empty()
                .append(template);
        }
    };
    
  • Load template with data into the DOM
    var app = {
        render: function(parent) {
            var self = this;
    
            self.getUserData(self.userId, function(userData) {
                var dataToTemplate = {
                        userId: self.userId,
                        userData: userData
                    },
                    template = $(monster.template(self, 'app', dataToTemplate));
    
                parent
                    .empty()
                    .append(template);
            });
        }
    };
    
  • Load a string template in a Toastr Notification or Monster Alert
    var app = {
        renderUserCreate: function(args) {
            var self = this,
                userData = args.data.user;
    
            self.requestCreateUser({
                data: {
                    user: userData
                },
                success: function(data) {
                    var toastrTemplate = monster.template(self, '!' + self.i18n.active().toastr.success.userCreate, { name: data.name });
    
                     toastr.success(toastrTemplate);
                },
                error: function(data) {
                    var alertTemplate = monster.template(self, '!' + self.i18n.active().alert.error.createUser, { type: data.type });
    
                    monster.ui.alert('error', alertTemplate);
                }
            });
        }
    };