Подчеркивание шаблона, изменяющего неопределенность

Я смотрел несколько видеороликов по теме магистральных js. Это пример прямо из видео. Это с 2012 года, поэтому я думаю, что основные правила/библиотека изменились, но я не могу понять, почему это не работает в данный момент. В видеоролике человек показывает, что он работает в скрипте JS, но я не могу заставить его работать. (Я включил необходимые библиотеки в JS Fiddle, т.е. Подчеркивание, магистраль и 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>

Ответы

Ответ 1

Раньше вы могли анализировать и заполнять шаблон подчёркивания одним движением:

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

Но с Underscore 1.7.0 второй аргумент _.template содержит параметры шаблона:

шаблон _.template(templateString, [settings])

Компилирует шаблоны JavaScript в функции, которые можно оценить для рендеринга. [...] Аргумент настройки должен быть хешем, содержащим любой _.templateSettings, который должен быть переопределен.

Вам нужно скомпилировать шаблон с помощью _.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);

В вашем случае это выглядит примерно так:

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>

Ответ 2

Это может быть полезно

1: Если у вас более одного шаблона или когда-нибудь вы используете внешний шаблон, чтобы он мог быть полезным для вас внутри метода, вы можете написать код многократного использования

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