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

Edit this page here