Plantilla de subrayado que arroja un error de variable no definida

He visto algunos videos sobre el tema de backbone js. Este es un ejemplo sacado directamente del vídeo. Es de 2012, así que creo que las reglas/biblioteca de la columna vertebral han cambiado, pero no puedo entender por qué esto no funciona en este momento. En el video, la persona lo muestra ejecutándose en JS Fiddle, pero no puedo hacerlo funcionar. (He incluido las bibliotecas necesarias en JS Fiddle, es decir, guión bajo, columna vertebral y 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>

Expandir fragmento

Sep 17 '14 08:09 ra170

Solías poder analizar y completar una plantilla de guión bajo de una sola vez, así:

var html = _.template(template_string, data);

Pero a partir de Underscore 1.7.0, el segundo argumento _.templatecontiene opciones de plantilla:

plantilla _.template(templateString, [settings])

Compila plantillas de JavaScript en funciones que se pueden evaluar para su representación. [...] El argumento de configuración debe ser un hash que contenga cualquiera _.templateSettingsque deba anularse.

Debe compilar la plantilla usando _.templatey luego ejecutar la función devuelta para completar la plantilla:

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

En tu caso, sería algo como esto:

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>

Expandir fragmento

Sep 17 '2014 02:09 mu is too short

Esto puede ser útil

1: Si tiene más de una plantilla o en algún momento está utilizando una plantilla externa, puede resultarle útil dentro del método, puede escribir código reutilizable

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

Jan 30 '2015 11:01 Pankaj Bisht