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?

The best place for documentation is the Handlebars website, which you can find at handlebarsjs.com. In regards to using Handlebars with Backbone, there is no difference or extra complexity involved. The only difference is that you have to include Handlebars, but other than that it is similar to using Underscore as your template engine. I hope this helps. — Bart Jacobs
– Bart Jacobs, Commented Jan 31, 2012 at 10:17
Thank you for your help! Do we still have to include underscore, or can that be done away with? — Joseph at SwiftOtter
– Joseph at SwiftOtter, Commented Jan 31, 2012 at 13:34
Yes. Underscore is a dependency for Backbone as it heavily relies on it. — Bart Jacobs
– Bart Jacobs, Commented Jan 31, 2012 at 13:58

naimdjon · Accepted Answer · 2019-07-15 12:39:51Z

80

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.

edited Jul 15, 2019 at 12:39

naimdjon

3,6641 gold badge27 silver badges46 bronze badges

answered Jun 1, 2012 at 3:19

SimplGy

20.5k15 gold badges112 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kris Selbekk Over a year ago

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 Over a year ago

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

Ravi Hamsa Over a year ago

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 Over a year ago

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.

satanas · Accepted Answer · 2016-04-08 02:18:48Z

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;
  }
});

edited Apr 8, 2016 at 2:18

answered Jan 9, 2016 at 22:10

satanas

7067 silver badges11 bronze badges

Comments

TYRONEMICHAEL · Accepted Answer · 2012-06-22 15:34:48Z

1

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.

answered Jun 22, 2012 at 15:34

TYRONEMICHAEL

4,2744 gold badges33 silver badges48 bronze badges

Comments

zloctb · Accepted Answer · 2017-03-22 12:59:51Z

0

define(["app", "handlebars",
    "text!apps/templates/menu.tpl"
], function (app, Handlebars, template) {

    return {
        index: Marionette.ItemView.extend({
            template: Handlebars.compile(template),
            events: {
                'click .admin-menu-ref': 'goToMenuItem'
            },
            goToMenuItem: function (e) {
               //......
            }
        })
    }
});


 new view.index({model: models});

answered Mar 22, 2017 at 12:59

zloctb

11.3k10 gold badges78 silver badges92 bronze badges

Collectives™ on Stack Overflow

Using Handlebars with Backbone

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related