RequireJs text plugin and UnderscoreJs templates - backbone.js

Question

Alright people,
I am using the RequireJs text plugin to pull in underscore templates (.html) in my backbone application. Unfortunately my underscore code in my templates are being rendered as plain text.
define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template($(Template).html(), {posts : this.collection});
this.render();
},
render: function (Template) {
this.$el.html(this.template);
return this;
}
});
return BlogPostIndexView;
});
Here is my code for my view, you can see i am pulling-in two templates and setting them. However it getting rendered as ...
Globall Coach Blog Posts
<% _.each(posts, function(post){ %>
<%= _.escape(post.title) %>
<% }); %>
Has anybody ever had this issue?

Answer 1

Seems like you're not using the underscore template function correctly. Underscore compiles the string into a function in which you can pipe in data. so your code should look like this:
define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template($(Template).html())({posts : this.collection});
this.render();
},
render: function () {
this.$el.html(this.template);
return this;
}
});
return BlogPostIndexView;
But I would refactor this further because you usually want to dynamically re-render with the latest data so I would put the piping in the data to the template in the "render" method instead of "initialize".
So preferably I would do this:
define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template($(Template).html())
this.render();
},
render: function () {
this.$el.html(this.template({posts : this.collection}));
return this;
}
});
return BlogPostIndexView;

Answer 2

Turns #mu-is-to-short was correct, requireJs text module returns the the raw html.
Here it `define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template(Template);
},
render: function (Template) {
this.$el.html(this.template({posts : this.collection.toJSON()}));
return this;
}
});
return BlogPostIndexView;
});