Using Handlebars with Backbone

Question

I am learning Backbone/Handlebars/Require. I have looked all over online and on SO - are there any tutorials or websites that you can direct me to that would provide helpful information for using using handlebars instead of underscore?

Solution 1

Using handlebars.js instead of underscore templating is pretty straightforward. Check out this example:

https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view (scroll to the "Loading a Template" section)

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using underscore
        var template = _.template( $("#search_template").html(), {} );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

Basically, the convention in backbone is to build your html in a render function. The use of templating engine is left completely up to you (which I like about Backbone). So you'd just change it to:

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using Handlebars
        var template = Handlebars.compile( $("#search_template").html() );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

Since you're using require.js, you can make Handlebars a dependency at the top of your module. I'm pretty new to this, but it sounds like the learning to focus on would be Backbone.js patterns and require.js usage.

Solution 2

I would prefer to compile the template once (during initialize), that way you avoid to recompile the template with every render. Also, you need to pass the model to the compilated template in order to generate the HTML:

SearchView = Backbone.View.extend({
  initialize: function(){
    // Compile the template just once
    this.template = Handlebars.compile($("#search_template").html());
    this.render();
  },
  render: function(){
    // Render the HTML from the template
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

Solution 3

If you are using require.js you wont be able to use the current Handlebars file. I used the following Handlebars Plugin and it seems to be kept up to date with the current version. Just replace your Handlebars file with the plugin above if Handlebars is returning null in your module.

Comments

[Kris Selbekk]

if you prefer to keep your templates in separate files, how would you load them? I am thinking sammy.js style, where you could specify the address of a template file in it's render-method?

[Matt Stone]

When using Backbone.Model or Backbone.Collection as the template context, remember to use .toJSON()

[Ravi Hamsa]

This is not that simple if you already developed a application using underscore as a template engine. Underscore lets you write JavaScript code inside a template (off course you got to use special tags), but Handlebars doesn't.

[SimplGy]

Yes, @RaviHamsa, migration would be a different challenge because the templating languages have different capabilities. If you want to switch, suggest you just write all new templates in Handlebars until you reach a critical mass, then migrate old stuff in a refactoring work effort.