Question

您好我正在尝试在Underscore.js中探索模板

到目前为止，我创建了这个模板字符串：

  var student = "<% _.each(students, function(elem, index, list){ %>" +
    "<h1>" + "<%= elem.lastname %>" + " " + "<%= elem.firstname %>" + "</h1>" +
    "<br/> <h2>" + "<%= elem.school %>" + "</h2>" +
  "<% }); %>";

然后在我的代码中我这样称呼它：

  function appendTemplateData(dataString) {
        let container = document.getElementById("container");
        container.innerHTML = container.innerHTML + dataString;
    }

 var result = _.template(student, students);
  appendTemplateData(result);

在这一部分：

var result = _.template(student, students);

我的模板变量是学生，而我有一个外部js文件w / c是一个带有ff信息的对象数组：

var students = [
    {
        "firstname": "Woody",
        "lastname" : "Johnson",
        "school" : "Bloc",
        "grade" : 12,
        "midterm_score": 75,
        "final_score": 85
    },
    {
        "firstname" : "Jerry",
        "lastname" : "Jones",
        "school" : "Hack Reactor",
        "grade" : 10,
        "midterm_score": 50,
        "final_score": 65
    }
];

运行我的代码后，它会返回此错误：

function (n){return o.call(this,n,m)}

我不确定这意味着什么。有帮助吗？为什么会出现这样的错误？我该如何解决？

Answer 1

正确的调用应该是：_.template（学生）（学生），更像你编译模板然后你调用它...你得到的函数是编译一个，不是错误

 var student = "<% _.each(students, function(elem, index, list){ %>" +
    "<h1>" + "<%= elem.lastname %>" + " " + "<%= elem.firstname %>" + "</h1>" +
    "<br/> <h2>" + "<%= elem.school %>" + "</h2>" +
  "<% }); %>";
  
  var students = [
    {
        "firstname": "Woody",
        "lastname" : "Johnson",
        "school" : "Bloc",
        "grade" : 12,
        "midterm_score": 75,
        "final_score": 85
    },
    {
        "firstname" : "Jerry",
        "lastname" : "Jones",
        "school" : "Hack Reactor",
        "grade" : 10,
        "midterm_score": 50,
        "final_score": 65
    }
];

  function appendTemplateData(dataString) {
        let container = document.getElementById("container");
        container.innerHTML = container.innerHTML + dataString;
    }

 var compiledTemplated = _.template(student);
 var result = compiledTemplated({students: students});
  appendTemplateData(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>


<div id="container">
</div>

下划线js

1 个答案: