时间戳

首页 > 解决方案 > 小胡子类型错误：模板无效！模板应该是“字符串”但“未定义”

javascript - 小胡子类型错误：模板无效！模板应该是“字符串”但“未定义”

问题描述

我正在学习 mustache.js 客户端模板，但效果不是很好。在以下代码示例中，我尝试根据所选年份选项在表格中显示学生列表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Test</title>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/mustache.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:3%">
    <label>Year</label>
    <select id="year" onchange="refreshList(this)">
        <option value=""></option>
        <option value="2019">2019</option>
        <option value="2018">2018</option>
    </select>
    <br /><br />
    <table>
        <thead>
            <tr>
                <th>Registered Date</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody id="studentsList">
            <script type="text/template" id="studentsTemplate">
            {{#students}}
                <tr class='row_{{id}}'>
                <td>{{registered}}</td>
                <td>{{name}}</td>
                <td>{{age}}</td>
                </tr>
            {{/students}}
           </script>
        </tbody>
    </table>
</div>

<script>

var testing = {
        "name" : "student-collection",
        "students" : [
            {
                "id" : 97,
                "registered" : "2018-03-01",
                "name" : "John",
                "age" : 20
            },
            {
                "id" : 118,
                "registered" : "2019-04-01",
                "name" : "Mary",
                "age" : 21
            },
            {
                "id" : 509,
                "registered" : "2018-08-01",
                "name" : "Dave",
                "age" : 19
            }
        ]
    };

    function inYear(registerYear){
        return function(student){
            var date = new Date(student.registered);
            return date.getFullYear() == Number(registerYear);
        }
    }


    function refreshList(selected){
        var filters = testing.students.filter(inYear(selected.value));

        var html = Mustache.render($('#studentsTemplate').html(), {students : filters});
        var list = $("#studentsList");
        list.empty();
        list.append(html);
    }

    function refreshList2(selected){
        var filters = testing.students.filter(inYear(selected.value));

        var html = Mustache.render($('#studentsTemplate').html(), {students : filters});
        document.getElementById("studentsList").innerHTML = html;
    }

</script>

</body>
</html>

当我第一次选择“年份”下拉菜单时，表格确实显示正确。但是，如果之后选择了下拉列表中的不同年份，则会出现“TypeError：无效模板！模板应该是“字符串”但“未定义”作为第一个参数给出...”错误。

我认为这是因为当我清空函数中的“studentsList”时，“studentsTemplate”已被删除refreshList()。如果我像在 refreshList2() 中那样直接设置 innerHTML 也无济于事。

如何在不影响“studentsTemplate”模板的情况下清除表中的学生行？

标签： javascriptjquerymustache

解决方案

推荐阅读