我看过一些关于主干js主题的视频。这是直接来自视频的示例。这是从 2012 年开始的,所以我认为主干规则/库已经改变,但我不明白为什么这目前不起作用。在视频中,该人展示了它在 JS Fiddle 中运行,但我无法让它工作。 (我已经在 JS Fiddle 中包含了必要的库,即 underscore、backbone 和 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>
您过去可以一次性解析并填写下划线模板,如下所示:
var html = _.template(template_string, data);
但从 Underscore 1.7.0 开始,第二个参数_.template http://underscorejs.org/#template包含模板选项:
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)