Question

我正在尝试在我的胡须模板中调用JavaScript函数，但是在使用脚本标签进行调用时却不断出错。

我尝试在脚本上使用转义标签，但仍然无法正常工作。我进行了一些搜索，但找不到能解决我问题的任何东西。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="main.css" rel="stylesheet" type="text/css"> <!--So far there may be multiple CSS pages to manage the overall layout -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" type="text/javascript"></script>
    <script>
        function generateFields(amt){
            var htmlElements = "";
            for(var i = 0; i < amt; i++)
            {
                htmlElements += '<div>{{i}}: <input type="text" class="inputAnswer"></div>'
            }
        }
    </script>
</head>
<body>
    <script id="studentAnswerTemplate">
        var data = {
            assignmentName: "Assignment 2",
            questionAmt: 5,
            generateFields: function(amt){
                var htmlElements = "";
                for(var i = 0; i < amt; i++)
                {
                    htmlElements += '<div>{{i}}: <input type="text" class="inputAnswer"></div>'
                }
            }
        };

        var template = [
            '<div class="container">',
            '<div class="row">',
            '<div class="jumbotron text-center">',
            '<div class="col-4"></div>',
            '<div class="col-4 mx-auto text-center">',
            '<img class="img-fluid" src="UTPB_LOGO.png" alt="n/a">',
            '</div>',
            '<div class="col-4"></div>',
            '<div class="row"></div>',
            '<h3>{{assignmentName}}</h3>',
            '</div>',
            '<nav class="navbar navbar-expand-sm">',
            '</nav>',
            '</div>',
            '<br><br>',
            '<div class="row">',
            '<div class="col-md-3">',
            '<br>',
            '</div>',
            '<div class="col-md-5" id="middle">',
            '<h2>Answers</h2>',
            '<form action="/action_page.php">',
            '<p>Please answer each question to the best of your ability.</p>',
            '<div>',
            '<form action="/action_page.php">',
            /*need to autogenerate blanks using data from DB here*/
            '<script>{{generateFields(5)}}</script>',
            /*here is where I run into issues ^^*/
            '</form>',
            '</div>',
            '<button type="submit" class="btn btn-primary">Submit</button>',
            '</form>',
            '</div>',
            '<div class="col-md-4">',
            '</div>',
            '</div>',
            '<br><br><br><br>',
            '<div class="row">',
            '<footer class="page-footer font-small black">',
            '<div class="footer-copyright text-center py-3">© 2019 Copyright --, All rights reserved',
            '<br>',
            '</div>',
            '</footer>',
            '</div>',
            '</div>'
        ].join("\n");

        var html = Mustache.render(template, data);
        $("body").append(html);
    </script>
</body>

我希望使用此功能生成许多文本字段，但目前无法执行该功能。谢谢！

如何在Moustache模板中调用JavaScript函数

0 个答案: