How to integrate Handlebars template to Marionette

Question

In my app, I am using the handlebars template plugin, I am little bit confused here, how can i integrate handlebars template to marionette Item View which is using separate template?

here is my code :

define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'hbs!scripts/templates/login/loginTemp'], // this is my handlebars template.
    function ($,_,Backbone,Marionette,loginTemplate) {
        "use strict";
        socialApp = window.socialApp || {};

        socialApp.loginView = Backbone.Marionette.ItemView.extend({
            tagName:'div',
            className:'loginContainer',
            template: '#loginTemplate' //this is template for login alone (from DOM )
        });

        return socialApp.loginView;
    }
);

"loginTemp" - has all details what i require for login template.

Answer 1

You could override Marionette.TemplateCache.prototype.compileTemplate function to achieve needed behavior:

 Marionette.TemplateCache.prototype.compileTemplate = function (yourRawTemplate) {
        // In case if template is function
        if (_.isFunction(yourRawTemplate)) {
            return yourRawTemplate;
        } else {
            return Handlebars.compile(yourRawTemplate);
        }
 };

Answer 2

If you are using regions in your marionette application, such as

socialApp.addRegions({
  loginRegion:'<id of the region>'
})

and if your template is written inside a script tag, then you can easily render your template in this manner:

//defining the view
socialApp.loginView = Marionette.ItemView.extend({
  template:Handlebars.compile(document.getElementById('loginTemplate').innerHTML),
  ...
  ...//other code and view logic
});

and then,

var loginView = new socialApp.loginView();  //creating instance of the view
socialApp.loginRegion.show(loginView);  //rendering it inside the region

Answer 3

My "Marionette-Handlebars Boilerplate" might help you:
https://github.com/yuraji/marionette-handlebars-boilerplate