没有定义强调的模板投掷变量错误 [英] Underscore template throwing variable not defined error

问题描述

我看过的骨干JS的话题一些影片。这是直接从视频的例子。这是从2012年开始，所以我想骨干规则/库已经改变了，但我不明白，为什么这并不此刻工作。在视频中，人说明它在JS小提琴运行，但我无法得到它的工作。 （我已经包含在JS小提琴，即下划线，骨干网和jQuery必要的库）

\r

\r

VAR V = Backbone.View.extend（{\r
  EL：身体，\r
  渲染：功能（）{\r
  VAR数据= {纬度：-27，经度：153};\r
    这$ el.html（_模板（'＆LT;％=纬度％GT;＆LT;％= LON％GT;'，数据））;\r
    返回此;\r
  }\r
}）;\r
\r
变种V =新的V（）;\r
\r
v.render（）;

\r

＆LT;脚本SRC =htt​​p://underscorejs.org/underscore-min .js文件＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本SRC =htt​​p://backbonejs.org/backbone-min.js＆GT;＆LT; / SCRIPT＆GT;

\r

\r

\r

解决方案

您曾经是能够在一个一个下划线模板来解析和填补是这样的：

  VAR HTML = _.template（template_string，数据）;
 

但作为下划线1.7.0，第二个参数来 _。模板 包含模板选项：

  

模板 _。模板（templateString，[设置​​]）

  
  

编译的JavaScript模板成可呈现评估函数。 [...]在设置参数应该是包含任何 _。templateSettings 应该重写。散列

您必须使用 _编译模板的模板，然后执行返回的功能，让您填写的模板：

  VAR TMPL = _.template（template_string）;
变种的html = TMPL（数据）;//或者作为一个班轮，记下所有的括号是
变种的html = _.template（template_string）（数据）;
 

在你的情况，这将是这个样子：

\r

\r

VAR V = Backbone.View.extend（{\r
  EL：身体，\r
  渲染：功能（）{\r
  VAR数据= {纬度：-27，经度：153};\r
    VAR TMPL = _.template（'＆LT;％=纬度％GT;＆LT;％= LON％GT;'）;\r
    这$ el.html（TMPL（数据））;\r
    返回此;\r
  }\r
}）;\r
\r
变种V =新的V（）;\r
\r
v.render（）;

\r

＆LT;脚本SRC =htt​​p://underscorejs.org/underscore-min .js文件＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本SRC =htt​​p://backbonejs.org/backbone-min.js＆GT;＆LT; / SCRIPT＆GT;

\r

\r

\r

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)

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>

解决方案

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:

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.

You have to compile the template using _.template and then execute the returned function to get your filled in 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);

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="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>

这篇关于没有定义强调的模板投掷变量错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！