javascript - template - Subrayar plantilla arrojando variable no definida error

underscore js vs lodash

Question

He visto algunos videos sobre el tema de backbone js. Este es un ejemplo directamente del video. Es de 2012, así que creo que las reglas / biblioteca de red troncal han cambiado, pero no puedo entender por qué esto no funciona en este momento. En el video, la persona lo muestra ejecutándose en el JS Fiddle, pero no puedo hacer que funcione. (He incluido las bibliotecas necesarias en JS Fiddle, es decir, subrayado, backbone 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>

Answer 1

Esto puede ser útil

1: Si tiene más de una plantilla o en algún momento está usando una plantilla externa, por lo que puede ser útil para usted 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();

Answer 2

Solía ​​ser capaz de analizar y completar una plantilla de subrayado de una sola vez de esta manera:

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

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

template _.template(templateString, [settings])

Compila plantillas de JavaScript en funciones que pueden evaluarse para la representación. [...] El argumento de configuración debe ser un hash que contenga cualquier _.templateSettings que deba ser anulado.

_.template compilar la plantilla usando _.template y luego ejecutar la función devuelta para obtener su plantilla completa:

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 su caso, se vería así:

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>