下划线模板引发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> 

你曾经能够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> 

这可能是有用的

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