javascript - 下划线模板抛出变量未定义错误

Question

我看过一些关于 backbone js 的视频。这是直接来自视频的示例。它是从 2012 年开始的，所以我认为主干规则/库已经改变，但我不明白为什么这在此刻不起作用。在视频中，该人展示了它在 JS Fiddle 中运行，但我无法让它工作。 (我在 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>

Answer 1

您过去可以像这样一次性解析和填充 Underscore 模板:

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

但是从 Underscore 1.7.0 开始，_.template 的第二个参数包含模板选项:

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.

您必须使用_.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>