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

Question

我看了一些有关主干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>

Answer 1

您曾经能够一口气解析并填写Underscore模板，如下所示：

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>