下划线模板引发variables未定义错误

我看了一些关于骨干js主题的video。 这是直接来自video的例子。 从2012年开始，所以我认为骨干规则/图书馆已经发生了变化，但是我不明白为什么现在不行。 在video中，这个人显示它运行在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="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

你曾经能够parsing并填写一个下划线模板，就像这样：

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

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

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