Use Handlebars.js with Backbone.Marionette

Question

Is it possible to use the Handlebars.js with the Backbone.Marionette extension without reimplementing the Views render function? It seems that Marionette is relying on the convention that you use Backbone.js with underscores templating engine. But I really like the handlebar approach so I'm asking if I can the high-level-tools of Marionette with handlebars.

There's something about Marionette and Handlebars integration in Marionette's wiki, check it out: https://github.com/marionettejs/backbone.marionette/wiki/Using-handlebars-templates-with-marionette — Ingro, Mar 29 '13 at 13:40
check this link: [link][1] hope it helps [1]: http://stackoverflow.com/questions/11501516/backbone-marionette-i18n-handlebars/11505302#11505302 — danikoren, Mar 29 '13 at 20:57

score 24 · Accepted Answer · edited May 23 '17 at 11:47

A simple way to use Handlebars with Marionette is simply to define template in each View as a pre-compiled Handlebars template function. For instance:

var MyView = Backbone.Marionette.ItemView.extend({
    template: Handlebars.compile("Hello, {{name}}"),
    model: new Backbone.Model({name: "Steve"})
});

Marionette's default Renderer will detect that the template attribute is a function, and will call it accordingly.

See also the official documentation about this case : https://github.com/marionettejs/backbone.marionette/wiki/Using-handlebars-templates-with-marionette

and an other Q/A with requirejs + Marionette + Handlebars precompiled : Using precompiled handlebars templates with Marionette

score 6 · Answer 2 · edited Dec 20 '13 at 23:25

6

@brettjonesdev is correct, but one other addition here that I found worked well was:

var MyView = Backbone.Marionette.ItemView.extend({
  template: Handlebars.compile($("#assign-products-main-view").html()),
  model: new Backbone.Model({name: "Steve"})
});

This helps when searching the DOM.

edited Dec 20 '13 at 23:25

Joseph at SwiftOtter

4,276
5
37
55

answered Jul 10 '13 at 06:28

andrewmart.in

1,563
14
23

score 3 · Answer 3 · answered Apr 16 '15 at 23:39

We can also make use of precompiled templates here.

var MyView = Backbone.Marionette.ItemView.extend({
template: Handlebars.templates['filename'],
model: new Backbone.Model({name: "Steve"})
});

This way we can remove the compilation role from Marionette.

score 2 · Answer 4 · edited Jun 12 '14 at 04:37

2

The current two answers do not exploit caching. Use this gist instead.

edited Jun 12 '14 at 04:37

Handsome Nerd

17,114
22
95
173

answered Jun 12 '14 at 04:29

Reza Salarmehr

478
3
4

Use Handlebars.js with Backbone.Marionette

4 Answers4

Linked