how to access object in template in Backbone [duplicate] - templates

Question

I've watched some videos on the topic of backbone js. This is an example straight from the video. It is from 2012, so I'm thinking backbone rules/library have changed, but I can't figure out why this does not work at the moment. In the video, the person shows it running in the JS Fiddle, but I can't get it to work. (I've included the necessary libraries in JS Fiddle, i.e. underscore, backbone and jQuery)
var V = Backbone.View.extend({
el:'body',
render: function () {
var data = { lat: -27, lon: 153 };
this.$el.html(_.template('<%= lat %> <%= lon%>', data));
return this;
}
});
var v = new V();
v.render();
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>

Answer 1

You used to be able to parse and fill in an Underscore template in one go like this:
var html = _.template(template_string, data);
But as of Underscore 1.7.0, the second argument to _.template contains template options:
template _.template(templateString, [settings])
Compiles JavaScript templates into functions that can be evaluated for rendering. [...] The settings argument should be a hash containing any _.templateSettings that should be overridden.
You have to compile the template using _.template and then execute the returned function to get your filled in template:
var tmpl = _.template(template_string);
var html = tmpl(data);
// or as a one-liner, note where all the parentheses are
var html = _.template(template_string)(data);
In your case, it would look something like this:
var V = Backbone.View.extend({
el:'body',
render: function () {
var data = { lat: -27, lon: 153 };
var tmpl = _.template('<%= lat %> <%= lon %>');
this.$el.html(tmpl(data));
return this;
}
});
var v = new V();
v.render();
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

Answer 2

This can be useful
1: If you have more then one template or sometime you are using external template so it can be useful for you inside method you can write reusable code
var V = Backbone.View.extend({
el:'body',
temp: function (str) {
// reusable code
return _.template(str);
},
render: function () {
var data = { lat: -27, lon: 153 };
// calling your view method temp
var tmpl = this.temp('<%= lat %> <%= lon %>');
this.$el.html(tmpl(data));
return this;
}
});
var v = new V();
v.render();