Можно ли создать глобальный компонент E js? - PullRequest
Новая
       3

Можно ли создать глобальный компонент E js?

0 голосов
/ 03 апреля 2020

Как вы можете видеть, я включил компонент navbar в свой файл index.e js, и я делаю то же самое с любым другим файлом, таким как страница пользователя, например. Можно ли как-нибудь использовать компонент navbar во всех моих файлах e js, включив его где-нибудь один раз? вместо того, чтобы включать его отдельно в каждый файл e js?

Сейчас я делаю это в каждом из моих файлов:

index.e js: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <% include components/navbar %>

        rest of the code...

    </body>
</html>

1 Ответ

1 голос
/ 05 апреля 2020

как вы просили в комментариях, это мой способ сделать это:
У меня есть папка "views" в проекте, включая эти папки внутри:

  • Активы
  • Макеты

и динамические c e js файлы рядом с ними
Допустим, мы хотим отобразить этот макет, который имеет заголовок на каждой странице, но с другим телом:

layout: 

  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <% for (let cssLink of cssLinks) { %>
    <link rel="stylesheet" href="<%= cssLink  %>" />
    <% } %>
    <title>home page</title>
  </head>
  <body>
    <h1>THIS IS HEADER!</h1>

    <div id="demo">
      <%- mainView %>
    </div>
  </body>
</html>

вы можете видеть, что есть переменная mainView в теле, поэтому давайте посмотрим, как мы можем вставить наше тело Dynami c:
У меня есть функция внутри моего папка утилит, которая уменьшает повторение кода: 

const ejs = require('ejs');
const path = require('path');
const layoutsPath = path.join(__dirname, "./../views/layouts/");
const assetsPath = path.join(__dirname, "./../views/assets/");
const viewsPath = path.join(__dirname, './../views/');
const load = (basePath, filename, data, cb = null) => {
    let route ;
    switch (basePath) {
        case 'layout': {
             route = layoutsPath;
             break;
        }
        case 'asset': {
             route = assetsPath;
             break;
        }
        case 'view': {
             route = viewsPath;
             break;
        }
        default: {
             route = basePath;
        }
    }

    ejs.renderFile(path.join(route, filename), data, (err, str) => {
        if (err) {
            console.log(err);
            return err;
        }
        if (cb === null) {
            return str;
        } else {
            return cb(str);
        }

    });
}

module.exports = {
    load
}

теперь в index.js я хочу вывести мой home.ejs внутри моего header.ejs на клиент: 

let allUsers = await usersModule.findAll();
let renderedHTML = '';
load('view', 'home.ejs', { allUsers }, (rendered) => {
    load('layout', 'header.ejs', { mainView: rendered, cssLinks: ['/css/header.css'] }, (fullView) => {
        renderedHTML = fullView;
    });
});
res.status(200).send(renderedHTML);

поэтому здесь я получаю необходимые данные для моего тела из базы данных, передавая их в home.e js, там il oop и отображаю мое тело, например для home.e js: 

    <div>
  <% for (let user of allUsers) { %> 

        <ul>
            <li>email : <%= user.email %></li>
            <li>name : <%= user.name %></li>
        </ul>

    <% } %>
</div>

Рендеринг тела передается нашему обратному вызову в качестве параметра, теперь мы можем передать его в наш заголовок с именем переменной * 103. 0 *, поэтому в верхнем колонтитуле все отображаемое тело будет вставлено в нужное место в нашем макете. Теперь наш макет и тело Dynami c объединены и готовы к отправке клиенту

.
...