将 Script 标签和 Body 标签插入到 NodeJS Handlebars 模板中

Question

我的问题是是否可以将 body 和 script 标签都注入到 handlebars 模板中。我浏览了网络，但只发现令人困惑 tutorials/example。举个例子，我已经设置了以下并且工作正常：

layout.hbs:

<!DOCTYPE html>
<html>
    <head>  
    </head>
    <body>
        {{{ body }}}
    </body>
</html>

index.hbs:

<h1>test</h1>

server.js:

const express = require('express');
const hbs  = require('express-handlebars');
app.engine('hbs',hbs({extname: 'hbs'}))
app.set('view engine', 'hbs');

但是！ 我还想实现的是，我还可以通过以下方式将 index.hbs 中的脚本添加到 layout.hbs 中：

layout.hbs:

<!DOCTYPE html>
<html>
    <head>
        {{{ script }}}  
    </head>
    <body>
        {{{ body }}}
    </body>
</html>

index.hbs:

<script>
    <script src="example.js" defer></script>
</script>
<body>
    <h1>test</h1>
</body>

这可能吗？如果是这样，我必须做出哪些改变

Answer 1

根据您要完成的具体目标，我建议将脚本放在布局中。

举个例子：

layout.hbs:

 <!DOCTYPE html>
<html>
 <body>
 {{> nav }}
 {{{body}}}
 {{> footer }}
<script src="/js/file-validation.js"></script>
</body>
</html>

文件-validation.js

(function() {
'use strict';
window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
}, false);

})();

support.hbs

 <form action="{{feedbackEmail}}"
                  method="POST" class="needs-validation" novalidate>
           <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputName">Name</label>
                        <input  name=name type="text" class="form-control" id="validationName" placeholder="Name" aria-describedby="inputGroupPrepend" required>
                        <div class="invalid-feedback">
                            Please enter your name.
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputEmail4">Email</label>
                        <input name="email" type="email" class="form-control" id="validationEmail" placeholder="You@email.com" aria-describedby="inputGroupPrepend" required>
                        <div class="invalid-feedback">
                            Please enter your email.
                        </div>
                    </div>
                </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>

这样当你把你的部分放在一起时，它会在你实现它的任何 .hbs 文件上调用脚本。

在这个例子中，它是由 needs-validation class 在支持表上完成的。

将 Script 标签和 Body 标签插入到 NodeJS Handlebars 模板中

Inserting both Script tags and Body tags into NodeJS Handlebars template

node.js

handlebars.js

express-handlebars