我看了一些有关主干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>
您曾经能够一口气解析并填写Underscore模板,如下所示:
var html = _.template(template_string, data);
但是从Underscore 1.7.0开始,第二个参数_.template包含模板选项:
_.template
模板 _.template(templateString, [settings]) 将JavaScript模板编译为可以评估以进行渲染的函数。[…] settings 参数应为包含任何_.templateSettings应覆盖的哈希值。
模板 _.template(templateString, [settings])
_.template(templateString, [settings])
将JavaScript模板编译为可以评估以进行渲染的函数。[…] settings 参数应为包含任何_.templateSettings应覆盖的哈希值。
_.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>