下划线模板投掷变量未定义错误

Question

我看过一些关于骨干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

您以前可以像这样一次解析并填写下划线模板:

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

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

模板 _.template(templateString, [settings])

将JavaScript模板编译为可以评估渲染的函数.[...] settings参数应该是包含任何_.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>