下划线模板错误:函数(n){return a.call(this,n,h)}[复制]

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:

<!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

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

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