Use Handlebars.js with Backbone.Marionette
Asked Answered
I

4

16

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.

Incurable answered 29/3, 2013 at 13:8 Comment(2)
There's something about Marionette and Handlebars integration in Marionette's wiki, check it out: github.com/marionettejs/backbone.marionette/wiki/…Parttime
check this link: [link][1] hope it helps [1]: #11502016Wessels
B
24

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

Bellaude answered 2/4, 2013 at 19:13 Comment(0)
U
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.

Uis answered 10/7, 2013 at 6:28 Comment(0)
D
3

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.

Divide answered 16/4, 2015 at 23:39 Comment(0)
M
2

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

Mair answered 12/6, 2014 at 4:29 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.