Вставка тегов Script и Body в шаблон NodeJS Handlebars - PullRequest
Новая
       8

Вставка тегов Script и Body в шаблон NodeJS Handlebars

0 голосов
/ 13 сентября 2018

Мой вопрос заключается в том, возможно ли внедрить теги body и script в шаблон руля. Я просмотрел в Интернете, но нашел только запутанные учебники / пример. Чтобы привести пример, у меня уже есть следующая настройка, и она отлично работает:

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>

Возможно ли это? и если да, то какие изменения я должен буду сделать

1 Ответ

0 голосов
/ 15 сентября 2018

В зависимости от того, что именно вы пытаетесь выполнить, я бы предложил поместить скрипт в макет.

Как пример:

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 в форме поддержки.

...