Using templates with Backbone

Question

Helllo, probably this is a common question, but I didn't find the appropriate answer.

I have an html file: header.html which contains a header which I want to display

Here is my Backbone.View

el: $(".header"),

initialize: function () {
    this.render();
},

render: function () {
    var template = _.template( $("#header_template").html(), {} );
    this.$el.html( template );
},

When I put the code inside a java script template, it works:

<script type="text/template" id="header_template">
    code of header.html goes here
</script>

But when I use it this way:

<script type="text/template" id="about_template" src="header.html"></script>

it stops working even though, the firebug sees the code inside a template.

Can someone tell me what my mistake is and how to solve it

This might be helpful: http://stackoverflow.com/questions/8366733/external-template-in-underscore — Alex Mcp, Mar 12 '14 at 22:03
so we either put the code in the variable or use get method? — user3412802, Mar 12 '14 at 22:05

score 0 · Answer 1 · answered Mar 13 '14 at 11:53

A clean way to organize your templates is to create a subfolder tpl. Here you add all your .html files

Coenraets has a nice tutorial where he uses this approach together with a templateloader function.

You then load the templates in memory before bootstrapping your backbone application.

tpl.loadTemplates(['header', 'wine-details', 'wine-list-item'], function() {
    app = new AppRouter();
    Backbone.history.start();
});

Using templates with Backbone

1 Answers1