Compiling html templates using handlebars.js in backbone marionette CollectionView

Question

I am using backbone marionette with handlebars.js and require.js. So I know how to use templates if we don't have to supply anty dynamic value.

But now I have to show a list of employees using CollectionView of marionette framework So now I am not able to understand how to use handlebar to supply dynamic data into Collection View.

This is my view

ContactManager.module('ContactsApp.List', function(List, ContactManager,
        Backbone, Marionette, $, _) {

    List.Contact = Marionette.ItemView.extend({
        tagName : "li",
        template : Handlebars.compile(EmployeeTemplate)
    });

    List.Contacts = Marionette.CollectionView.extend({
        tagName : "ul",
        itemView : List.Contact
    });
});  

This is the template

<label><%= firstName %> <%= lastName %> </label>

How to supply these parameters dynamically to the CollectionView?

Answer 1

Check out the Marionette documentation for the Renderer and TemplateCache. Between these two resources, you should be able to do this. I use Mustache personally, and overrode the methods specified in the documentation...and it works GREAT.

First the Renderer:

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.renderer.md#custom-template-selection-and-rendering

Basically, override the Renderer.render method. It will receive the template id (what you specify on your model, and the data). It should return the rendered template.

And then the TemplateCache:

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.templatecache.md#customizing-template-access

The TemplateCache can be used to both retrieve the template, via loadTemplate and then compile the template with compileTemplate. Override these to point to Handlebars, and away you go!

Hope this helps!