Question

我正在关注一个关于下划线的视频教程，一切都很顺利，直到我达到你将逻辑放在模板中的程度

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>

结果：

function（n）{return a.call（this，n，h）}

我知道为什么会收到此错误？我尝试将模板提取到<body> like <script type="text/template" id="temp"> ....，我得到了：未捕获的TypeError：undefined不是函数underscore.js：1304 h.template underscore.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);

Answer 1

请仔细查看_.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>"

Answer 2

我已经尝试过您的代码，它运行良好

我建议用这个下划线库替换你的underscore.js

https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/modular-backbone/js/libs/underscore/underscore-min.js

我遇到了像你这样的问题，undercorejs.org上的图书馆无法工作

我希望图书馆可以帮助您解决问题

下划线模板错误：function（n）{return a.call（this，n，h）}

2 个答案: