Усы TypeError: Неверный шаблон! Шаблон должен быть "строкой", но "неопределенным" - PullRequest
Новая
       19

Усы TypeError: Неверный шаблон! Шаблон должен быть "строкой", но "неопределенным"

0 голосов
/ 09 июня 2019

Я изучаю шаблон клиентской части 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: Invalid template! Template должен быть« строкой », но в качестве первого аргумента было указано« undefined »», если впоследствии был выбран другой год в раскрывающемся списке.

Я думаю, это потому, что 'StudentsTemplate' был удален, когда я очищал 'StudentsList' в функции refreshList(). Также не поможет, если я установлю innerHTML напрямую, как в refreshList2 ().

Как очистить строки учеников в таблице, не затрагивая шаблон 'StudentsTemplate'?

...