Forum Pasja Informatyki - Najnowsze z tagiem ejs

ejs nie działa w środku tagów HTML

Sun, 06 Nov 2022 11:34:40 +0000

        <form>
            <label for="sort" class="form-label">Sortuj wg</label>
            <select name="sort" id="sort" class="form-control">
                <option value="">Domyślnie</option>
                <option value="name" <%- query.sort === 'name' ? 'selected' : '' %>>A-Z</option>
                <option value="employeesCount">Pracowników</option>
            </select>
            <button class="btn btn-primary mt-3">Zastosuj</button>
             
        </form>

Witam,

Mam problem z wyrażeniem ejs w pliku .ejs - kiedy próbuję wpisać takie wyrażenie do dowolnego tagu HTML, w ogóle nie wykrywa mi tego jako wyrażenie ejs (i nie podświetla w ten sposób składni) tylko prawdopodobnie jako niepoprawną składnię HTML. Teoretycznie ten sposób zapisu raczej powinien działać, ale z jakiegoś powodu jest traktowany (chyba) jako zła składnia HTML-a. Chodzi mi o zapis ejs w środku drugiego tagu <option> (5. linia kodu).
Dodam, że składania ejs w tym samym pliku działa jeśli piszę jakieś wyrażenie ejs poza tagami HTML. Czym to może być spowodowane?
Korzystam w wersji ejs 3.1.6.

Wyśrodkowanie tekstu i obrazka do linii

Thu, 28 Oct 2021 09:50:52 +0000

Po prawej stronie w menu dodałem awatar użytkownika, lecz przez to tekst (nav-link) błędnie się ułożył. Ktoś jakieś pomysły jak temu zaradzić?

HTML:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle hrefWhite" role="button" data-bs-toggle="dropdown">
        Zalogowano jako <%= 'CENZURA' === user.id ? 'admin ' : '' %><strong><%= user.username %>#<%= user.discriminator %></strong>
    </a>
</li>

<img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png?size=512" id="avatar" alt="">

CSS:

#avatar {
    border-radius:35%;
    height:52px;
}

Nie może odczytać wartości, a wyświetlić może - EJS, bug compilatora?

Mon, 12 Apr 2021 12:21:46 +0000

Witam, mam dziwny problem. Mam następujący kod w EJS

                     if(!tournamentsList){%>
                        Brak zaplanowanych turniejów
                    <%}else if(tournamentsList.length!==0){
                        const today = new Date();
                        let count=0;
                        for(i=0; i<tournamentsList.length ; i++){ 
                            console.info(tournamentsList[i].date)
                            const date = tournamentsList[i].date;
                            const peaple = getPeapleCount(tournamentsList[i].name);

console.info wyświetla prawidłowo:

2021-04-07T16:47:00.000Z

Jednak następna linijka już się sypie, a co więcej błąd mówi o undefined, gdzie przecież na górze w kodzie widać że jest na to warunek (i przechodzi bo jak widać mogę wyświetlić). Błąd:

TypeError: C:\Users\User\Desktop\bilard\views\tournaments.ejs:42
40| </header>
41| <br>Poniżej znajduje się lista zaplanowanych na najbliższy czas turniejów. Organizowane są one w naszym klubie. Osoby chętne do uczestnictwa, muszą jedynie zapisać się, a samą płatność dokonać gótówką na miejscu w dniu turnieju.<br><br>
>> 42| <%
43| function checkSubscribe(tournamentname,username){
44| let found=false;
45| if(typeof usersInTournamentsList != "undefined"){

Cannot read property 'date' of undefined
at eval (eval at compile (C:\Users\User\Desktop\bilard\node_modules\ejs\lib\ejs.js:662:12), <anonymous>:75:51)
at tournaments (C:\Users\User\Desktop\bilard\node_modules\ejs\lib\ejs.js:692:17)
at tryHandleCache (C:\Users\User\Desktop\bilard\node_modules\ejs\lib\ejs.js:272:36)
at View.exports.renderFile [as engine] (C:\Users\User\Desktop\bilard\node_modules\ejs\lib\ejs.js:489:10)
at View.render (C:\Users\User\Desktop\bilard\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\User\Desktop\bilard\node_modules\express\lib\application.js:640:10)
at Function.render (C:\Users\User\Desktop\bilard\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\Users\User\Desktop\bilard\node_modules\express\lib\response.js:1012:7)
at ServerResponse.res.render (C:\Users\User\Desktop\bilard\node_modules\express-flash\lib\express-flash.js:29:16)
at C:\Users\User\Desktop\bilard\server.js:80:17

Czy to jest jakiś błąd w ejs? Bo zauwazyłem (bo mam już to drugi raz), że jak zmienię nazwę tej zmiennej przy wysyłaniu i odnowa pozmieniam wszędzie na tą drugą nazwę, to się wszystko naprawia - tak jakby gdzieś były błędne dane przechowywane i potrzebny by był jakiś twardy rebuild, żeby wszystkie pliki się odświeżyły, da się tak w node? Reset kompa też nie pomaga, a nie chce mi się, naprawiać takich rzeczy w taki dziwny sposób, że od nowa zmienną robie i wszedzie nazwe zmieniam.

Próbowałem, też zamiast !tournamentsList to typeof == undefined i też nic to nie zmienia.

Edit: wstawiam cały skrypt w ejs:

                    <%
                    function checkSubscribe(tournamentname,username){
                        let found=false;
                        if(typeof usersInTournamentsList != "undefined"){
                            for(i=0 ; i<usersInTournamentsList.length ; i++){
                                if(usersInTournamentsList[i].tournamentname===tournamentname){
                                    if(usersInTournamentsList[i].username===username){
                                        found=true;
                                    }
                                }
                            }
                        }   
                        return found;
                    }
                    function getPeapleCount(tournamentname){
                        let count=0;
                        if(typeof usersInTournamentsList != "undefined"){
                            for(i=0 ; i<usersInTournamentsList.length ; i++){
                                if(usersInTournamentsList[i].tournamentname===tournamentname)
                                    count++;
                            }
                        }   
                        return count;
                    }
                    function changeDateNumber(number){
                        if(number<10)
                            number="0"+number;
                        return number;
                    }
                    if(messages.subscribed){ %>
                        <div class="articlecenter">
                            <b> <%= messages.subscribed %> </b>
                        </div>
                    <% }
                    if(!tournament){%>
                        Brak zaplanowanych turniejów
                    <%}else if(tournament.length!==0){
                        const today = new Date();
                        let count=0;
                        for(i=0; i<tournament.length ; i++){ 
                            console.info(tournament)
                            const date = tournament[i].date;
                            const peaple = getPeapleCount(date);
                            if(date < today){
                                count++;%>
                                <div class = "tournament">
                                    <b><%= tournament[i].names %></b><br>
                                    <b><%= changeDateNumber(date.getDate())+"."+changeDateNumber(date.getMonth())+"."+date.getFullYear()+" "+changeDateNumber(date.getHours())+":"+changeDateNumber(date.getMinutes())%></b><br><br>
                                    <b>Poziom: </b><%=tournament[i].level%><br>
                                    <img height="70" src="img/<%=tournament[i].level%>.png"/><br>
                                    <b>Koszt wstępu:</b> <%= tournament[i].cost %><br>
                                    <b>Nagroda:</b> <%= tournament[i].reward %><br><br>
                                    <b>Liczba osób:</b> <%=peaple%>/<%= tournament[i].maxpeaple%> 
                                    <%if(peaple>=tournament[i].maxpeaple || checkSubscribe(tournament[i].name,user.username)){ %> 
                                    <br><br>
                                    <form action="/turnieje" method="POST">
                                        <input type="hidden" name = "tournamentname" value="<%= tournament[i].name %>"/>
                                        <input type="submit" value="Zapisz się"/>
                                    </form>
                                </div>
                                <%}
                            }
                        }
                        if(count===0){ %>
                            Brak zaplanowanych turniejów
                        <%}
                    } %>

Strona główna aplikacji ejs nie aktualizuje się natomiast wszystkie inne podstrony działają poprawnie.

Tue, 26 Jan 2021 13:55:30 +0000

Cześć,

W mojej aplikacji nodejs z silnikiem widoków ejs główna strona nie aktualizuje się natomiast wszystkie inne podstrony działają poprawnie. Mam te błąd już od kilku dni i nie wiem co zrobić. W każdej przeglądarce działa to tak samo. Wszędzie czyściłem ciasteczka i cache, ale nic nawet w samej aplikacji do dałem metodę ejs.clearCache() i dalej nie działa.

tutaj umieszczam kod z app.js, index.js i server.js :

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const flash = require('connect-flash');
const session = require('express-session');
const routes = require('./routes/index');
const errorControllers = require('./controllers/ErrorControllers');
const sanitizer = require('sanitize').middleware;
const ejs = require('ejs');

const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());

app.use(session({
    secret: 'sendEmail',
    resave: true,
    saveUninitialized: true,
    cookie: {}
}));

app.use(flash());

app.use('/', routes);

app.use(sanitizer);
app.use(errorControllers.notFound);
app.use(errorControllers.catchErrors);

ejs.clearCache();

module.exports = app;

const express = require('express');
const router = express.Router();

const PagesControllers = require('../controllers/PagesControllers');
const ApplicationController = require('../controllers/ApplicationController');
const { catchAsync } = require('../controllers/ErrorControllers');

router.get('/', PagesControllers.home);

// subpages
router.get('/subpages/portfolio.html', PagesControllers.po...);

router.get('/subpages/reviews.html', PagesControllers.rev...);

router.get('/subpages/web-pages.html', PagesControllers.we...);

router.get('/subpages/ux-design.html', PagesControllers.ux...);

router.get('/subpages/seo.html', PagesControllers.s...);

router.get('/subpages/online-shops.html', PagesControllers.on...);

router.get('/subpages/landing-page.html', PagesControllers.la...);

router.post('/src/account.js',
    ApplicationController.sanitize,
    ApplicationController.validate,
    ApplicationController.checkValidation,
    catchAsync(ApplicationController.store)
);

module.exports = router;

const app = require('./app');

app.set('port', 3000);

const server = app.listen(app.get('port'));

exports.home = (req, res) => {
    res.render('home', {
        formMessage: req.flash('form'),
        title: '',
        description: '',
        prefix: '',
    });
};

Jak by było jeszcze coś potrzebne to piszczie.

I z góry dziękuję.

EJS z Node.js a renderowanie dodatkowego pliku

Thu, 27 Aug 2020 12:38:55 +0000

Witam, chce wyrenderować plik ejs który ma "includowany" do siebie inny plik ejs, główny plik ejs jest w głównym folderze, ten includowany jest w podfolderze

kod server.js

const express = require('express');
const session = require('express-session');
const path = require('path');
let ejs = require('ejs');
const fs = require('fs');
const app = express();

app.set('views',path.join(__dirname + '/ejselements'))
const http = require('http').createServer(app);

let HTMLindex = ejs.compile(fs.readFileSync('index.ejs', 'utf-8'));

app.get('/', function(req, res){
    
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(HTMLindex());
    
});

Błąd brzmi "Could not find the include file "userbar""

index.ejs z głównego folderu ma linijke

 <%- include('userbar'); -%>

plik userbar.ejs w podfolderze ejselements ma zawartosc

<div class="user-bar"></div>

Problem z node.js i metodą POST

Tue, 12 May 2020 08:35:21 +0000

W ramach nauki tworzę aplikację dodającą książki do biblioteki. Korzystam z node, express, ejs oraz express-ejs-layouts. Będąc na stronie startowej użytkownik wybiera opcję dodania nowej książki. Wpisując adres url ręcznie np. http://localhost:5000/add wszystko działa poprawnie (ładuję się kolejna strona aplikacji). Jednak po naciśnięciu na konkretny element, którego zadaniem jest dodanie kolejnej książki pojawia się problem:

Zamieszczam kod z pliku app.js:

const express = require('express');
const expressLayouts = require('express-ejs-layouts');

const app = express();

app.use(expressLayouts);
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/views'));

app.use('/', require('./routes/index'));
app.use('/add', require('./routes/index'));
app.use('/library', require('./routes/index'));

const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`Server started on port ${PORT}`));

index.js w folderze routes:

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => res.send('hello world'));
router.get('/add', (req, res) => res.render('add'));
router.get('/library', (req, res) => res.render('library'));

module.exports = router;

index.ejs w folderze views:

<form action="/add" method="POST" class="left-side">...</form>

oraz mainPage.js w folderze views:

const leftSide = document.querySelector('.left-side');

leftSide.addEventListener('click', () => { leftSide.submit() });

Zamiana kodu z PUG na EJS

Fri, 28 Jun 2019 17:35:15 +0000

Hej, potrafi ktoś skonwertować ten kawałek kodu napisanego w PUG do poprawnego kodu EJS? ponieważ żaden converter nie daje rady.

     if (Message.length)
                .lightbox(v-show="showFeedback")
                    .lightbox__content
                        h2.lightbox__header #{ Message }
                        .lightbox__actions.lightbox__actions--centered
                            button.btn.btn--primary(@click="closeFeedbackLightbox") Close

EDIT: Trochę wysiłku i dałem jakoś radę sam.. Dla kogoś kto będzie kiedyś szukał coś podobnego:

<% if (Message.length) { %>
 <div class="lightbox" v-show="showFeedback">
  <div class="lightbox__content">
    <h2 class="lightbox__header"> <%= Message %> </h2>
    <div class="lightbox__actions lightbox__actions--centered">
      <button class="btn btn--primary" @click="closeFeedbackLightbox">Close</button>
    </div>
  </div>
</div>
<% } %>

Renderowanie DOMELementu zamiast String EJS

Sat, 15 Dec 2018 22:29:53 +0000

Ostatnio przygotowuje parę pomocnych helpersów do projektów opartych na expressie. Związku z tym próbuje ujarzmić jądro EJS.

To zacznijmy od kodu, setup serwisu:

// server.js
const express             = require('express');
const app                 = express();
const bodyParser          = require('body-parser');
const Provider          = require('./providers/provider');
const EnviromentLoader  = require('./loaders/EnviromentLoader');
const ServicesLoader    = require('./loaders/ServicesLoader');
const SecurityManager   = require('./utils/SecurityManager');

EnviromentLoader.setEnviroment(app);
ServicesLoader.loadServices(app);

app.engine('ejs', require('express-ejs-extend'));
app.use(express.static(__dirname + '/static'));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

Provider.loadProviders(app);

app.use(app.get('SessionProvider').createSession());
app.use('/', SecurityManager(app.get('config')));

require('./routing/Routes')(app);

var port = process.env.PORT || 8100;

app.listen(port);
console.log('Projekt_random_cup is running ' + port);

Provider dostarcza EJSExtension do midleware app.

const SessionProvider = require('./SessionProvider');
const EJSExtension = require('../utils/EJSExtension');

const Provider = {
  loadProviders: function(app) {
    EJSExtension.setConfig(app.get('config'));
    app.set('SessionProvider', SessionProvider);
    app.set('EJSExtension', EJSExtension);
  }
}

module.exports = Provider;

Następnie EJSExtension dostarcza metody pomocnicze:

const EJSExtension = {
  config: '',
  engine: {},
  fs: {},

  setConfig: function(config) {
    this.config = config;
    this.engine= require('ejs');
    this.fs = require('fs');
  },

  assets: function(file) {
    const basePath = this.config.assetsSetings.basic_url;
    const cssUrl = 'css/pages/';
    const url = `${basePath}${cssUrl}${file}.css`;
    var compiled = this.engine.compile(this.fs.readFileSync(__dirname + '/../views/helpers/assets/css.ejs', 'utf8'));
    var html = compiled({ url: url });
    return html;
  }
}
module.exports = EJSExtension;

Które baseControler dostarcza do innych kontrolerów, a te do templateRender (EJS)

<% extend('layouts/template') %>
  <section class="mainPage__topContainer">
  <div class="mainPage__slider">
    <% include components/notice/slider %>
  </div>
    <% if (!session.isLogged) { %>
      <div class="mainPage__form">
      <% include components/forms/login %>
      </div>
    <% } %>
</section>

<%= helpers.assets('main') %>

I tu wszystko działa, ale nie wrzuca mi domElement ale String, według moje spostrzeżenia (patrząc na console,logi jakie miała biblioteka) w oógle nie leci do templateRender, tylko do innej metody (jeszcze nie rozkminiłem gdzie), pytanie czy jest taka możlwość by zaczęło robić to co ma robić. Wiem, że w twig-u da się takie fajne ficzerki robić.

EDIT: Problem rozwiązany, należało zmienić znak w znaczniku.

<%- helpers.assets('main') %>

A nigdziie w dokumentacji tego nie napisali xd.