下划线模板错误:函数(n){return a.call(this,n,h)}
underscore template error: function (n){return a.call(this,n,h)}
我正在学习一个关于undercoreJS的视频教程,一切都很顺利,直到我达到了将逻辑放入模板的地步
SampleData.js包含学生数组:
var students = [
{
"firstname": "Woody",
"lastname" : "Johnson",
"school" : "Thoreau",
"grade" : 12,
"midterm_score": 75,
"final_score": 85
},
{
"firstname" : "Jerry",
"lastname" : "Jones",
"school" : "Thoreau",
"grade" : 10,
"midterm_score": 50,
"final_score": 65
},
{
"firstname" : "Bill",
"lastname" : "Parcells",
"school" : "Franklin",
"grade" : 12,
"midterm_score": 82,
"final_score": 91
},
{
"firstname" : "Rex",
"lastname" : "Ryan",
"school" : "Franklin",
"grade" : 11,
"midterm_score": 60,
"final_score": 67
}];
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Underscore Templates</title>
<style type="text/css">
.studentRec {
border: 1px solid #777;
margin: 4pt;
padding: 4pt;
font-size: 14pt;
background-color: #ccc;
}
.passingStudent {
background-color: lightGreen;
}
.failingStudent {
background-color: pink;
}
</style>
<script type="text/javascript" src="../underscore.js"></script>
<script type="text/javascript" src="../SampleData.js"></script>
<script type="text/javascript">
function appendTemplateData(dataString) {
var container = document.getElementById("container");
container.innerHTML = container.innerHTML + dataString;
}
var studentInfo1 = "<% _.each(students, function(item) { %>" +
"<div class='studentRec " +
"<% (item.midterm_score + item.final_score) / 2 > 65 ? print('passingStudent') : print('failingStudent') %>'>" +
"<span style='font-weight:bold'>Name:</span> <span><%= item.lastname %>, <%= item.firstname %> </span>" +
"<span style='font-weight:bold'>School:</span> <span><%= item.school %></span></div>" +
"<% }); %>";
window.addEventListener("load", function(e) {
var result = _.template(studentInfo1, students);
appendTemplateData(result);
});
</script>
</head>
<body>
<h1>Using Underscore Templates</h1>
<h2>Student Information:</h2>
<div id="container">
</div>
</body>
</html>
结果:
函数(n){返回a.call(this,n,h)}
知道我为什么会犯这个错误吗?我尝试将模板提取到<body> like <script type="text/template" id="temp"> ....
,得到:Uncaught TypeError:undefined不是函数下划线。js:1304h.template下划线.js:1304(匿名功能)
希望你能帮我解决
解决方案
var studentInfo1 = _.template("<% _.each(students, function(item) { %>" +
"<div class='studentRec " +
"<% (item.midterm_score + item.final_score) / 2 > 65 ? print('passingStudent') : print('failingStudent') %>'>" +
"<span style='font-weight:bold'>Name:</span> <span><%= item.lastname %>, <%= item.firstname %> </span>" +
"<span style='font-weight:bold'>School:</span> <span><%= item.school %></span></div>" +
"<% }); %>");
var result = studentInfo1(students);
appendTemplateData(result);
请仔细查看_.template()
函数的文档。http://underscorejs.org/#template
template
实用程序函数将模板字符串作为第一个参数,并返回一个函数,您可以使用该函数传入模板数据:
// `myTemplate` here is a function!
var myTemplate = _.template("<p><%= name %></p>");
// Now let's pass in the data for the template.
myTemplate({name: 'Joe Doe'}); // it returns: "<p>Joe Doe</p>"
我试过你的代码,它运行得很好
我的建议是用这个下划线库替换你的undercore.js
https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/modular-backbone/js/libs/underscore/underscore-min.js
我遇到了一个和你一样的问题,underscorejs.org上的库无法使用
我希望这个库能帮助你解决你的问题
相关文章:
- this.someFunction.call(this,param);的用途是什么;
- 定义CommonJS模块时,fn.call(this)与fn()的对比
- 用(function(){…}).call(this)包装文件,而用简单的()包装调用
- Advantage of (function() {/*...*/}).call(this);
- [].slice.call(this) vs array.prototype.call(this)
- 为什么使用 (function(){}).call(this);.
- 下划线模板错误:函数(n){return a.call(this,n,h)}
- this.a() vs a.call(this) in javascript
- Node.js:事件的关系.EventEmitter.call(this)和Obj.prototype.__proto_
- 为什么调用array.prototype. foreach .call()时将数组设置为THIS对象不能工作?
- 在创建自定义EventEmitter时是否需要events.EventEmitter.call(this)
- 为什么要写“call(this)”?在javascript匿名函数的末尾
- Function.prototype.call在严格模式之外改变this的类型;为什么
- 在扩展THREE.js的“类”时,为什么需要从新对象中调用.call(this)方法?
- 我如何使这个窗口时.call(this)从commonJS模块
- 在coffescript中使用.call(this)
- 为什么object.function.this在使用function.call时没有定义
- 'this'在Array.prototype.slice.call(arguments)中设置上下文
- JavaScript inheritance with .call(this)
- 使用.call(this)继承原型