This question already has an answer here:
这个问题已经有了答案:
- Underscore template throwing variable not defined error 2 answers
- 下划线模板投掷变量未定义错误2的答案。
I'm following a video tutorial about underscoreJS and everything was going fine until I reached the point where you put logic inside templates
我正在跟踪一个关于underscoreJS的视频教程,一切都很顺利,直到我达到了将逻辑放入模板的那个点。
SampleData.js contains students array:
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:
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>
Result:
结果:
function (n){return a.call(this,n,h)}
函数(n){返回a.call(n,h)}
Any idea why I'm getting this error? I tried extracting the template to the <body> like <script type="text/template" id="temp"> ....
and I got: Uncaught TypeError: undefined is not a function underscore.js:1304 h.template underscore.js:1304 (anonymous function)
你知道我为什么会犯这个错误吗?我试着提取模板 <身体> 像 <脚本type = " text 模板" id="临时工"> ....我得到了:未被捕获的TypeError:未定义的不是一个函数下划线。js:1304 h。模板下划线。js:1304(匿名函数)
Hope you can help me out
希望你能帮我。
Solution
解决方案
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);
2 个解决方案
#1
4
Please look at the documentation for the _.template()
function carefully. http://underscorejs.org/#template
请仔细查看_.template()函数的文档。http://underscorejs.org/模板
The template
utility function takes a template string as the first argument and returns a function that you can use to pass in your template data:
模板实用函数将模板字符串作为第一个参数,并返回一个函数,您可以使用该函数传递模板数据:
// `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>"
#2
0
I've tried your code, it runs good
我试过你的代码,它运行良好。
And my recommend is replacing your underscore.js with this underscore library
我的建议是替换下划线。使用这个下划线库。
https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/modular-backbone/js/libs/underscore/underscore-min.js
I've gotten a problem like yours, library on underscorejs.org can't work
我遇到了像你这样的问题,在underscorejs.org上的库不能工作。
I hope that library can help you to solve your problem
我希望图书馆能帮助你解决你的问题。
#1
4
Please look at the documentation for the _.template()
function carefully. http://underscorejs.org/#template
请仔细查看_.template()函数的文档。http://underscorejs.org/模板
The template
utility function takes a template string as the first argument and returns a function that you can use to pass in your template data:
模板实用函数将模板字符串作为第一个参数,并返回一个函数,您可以使用该函数传递模板数据:
// `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>"
#2
0
I've tried your code, it runs good
我试过你的代码,它运行良好。
And my recommend is replacing your underscore.js with this underscore library
我的建议是替换下划线。使用这个下划线库。
https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/modular-backbone/js/libs/underscore/underscore-min.js
I've gotten a problem like yours, library on underscorejs.org can't work
我遇到了像你这样的问题,在underscorejs.org上的库不能工作。
I hope that library can help you to solve your problem
我希望图书馆能帮助你解决你的问题。