I've watched some videos on the topic of backbone js. This is an example straight from the video. It is from 2012, so I'm thinking backbone rules/library have changed, but I can't figure out why this does not work at the moment. In the video, the person shows it running in the JS Fiddle, but I can't get it to work. (I've included the necessary libraries in JS Fiddle, i.e. underscore, backbone and jQuery)
我看过一些关于骨干js主题的视频。这是直接来自视频的示例。它是从2012年开始的,所以我认为骨干规则/库已经发生了变化,但我无法弄清楚为什么它现在不起作用。在视频中,该人显示它在JS Fiddle中运行,但我无法让它工作。 (我在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>
2 个解决方案
#1
You used to be able to parse and fill in an Underscore template in one go like this:
您以前可以像这样一次解析并填写下划线模板:
var html = _.template(template_string, data);
But as of Underscore 1.7.0, the second argument to _.template
contains template options:
但是从Underscore 1.7.0开始,_.template的第二个参数包含模板选项:
template
_.template(templateString, [settings])
template _.template(templateString,[settings])
Compiles JavaScript templates into functions that can be evaluated for rendering. [...] The settings argument should be a hash containing any
_.templateSettings
that should be overridden.将JavaScript模板编译为可以评估渲染的函数。 [...] settings参数应该是一个包含任何应该被覆盖的_.templateSettings的哈希。
You have to compile the template using _.template
and then execute the returned function to get your filled in template:
您必须使用_.template编译模板,然后执行返回的函数以获取填充的模板:
var tmpl = _.template(template_string);var html = tmpl(data);// or as a one-liner, note where all the parentheses arevar html = _.template(template_string)(data);
In your case, it would look something like this:
在你的情况下,它看起来像这样:
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>
#2
This can be useful
这可能很有用
1: If you have more then one template or sometime you are using external template so it can be useful for you inside method you can write reusable code
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();
#1
You used to be able to parse and fill in an Underscore template in one go like this:
您以前可以像这样一次解析并填写下划线模板:
var html = _.template(template_string, data);
But as of Underscore 1.7.0, the second argument to _.template
contains template options:
但是从Underscore 1.7.0开始,_.template的第二个参数包含模板选项:
template
_.template(templateString, [settings])
template _.template(templateString,[settings])
Compiles JavaScript templates into functions that can be evaluated for rendering. [...] The settings argument should be a hash containing any
_.templateSettings
that should be overridden.将JavaScript模板编译为可以评估渲染的函数。 [...] settings参数应该是一个包含任何应该被覆盖的_.templateSettings的哈希。
You have to compile the template using _.template
and then execute the returned function to get your filled in template:
您必须使用_.template编译模板,然后执行返回的函数以获取填充的模板:
var tmpl = _.template(template_string);var html = tmpl(data);// or as a one-liner, note where all the parentheses arevar html = _.template(template_string)(data);
In your case, it would look something like this:
在你的情况下,它看起来像这样:
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>
#2
This can be useful
这可能很有用
1: If you have more then one template or sometime you are using external template so it can be useful for you inside method you can write reusable code
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();