Use Handlebars.js with Backbone.Marionette

问题:

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.

回答1:

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

回答2:

@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.

回答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.

回答4:

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