User events with template engines like pug?

Question

I want to create an app using NodeJS, Express and Pug. The app should work similar to an editor and react to different user events.

Now I have a conceptual question: Is the approach with NodeJS and a template engine right for this?

I stumble upon how to get the events into the template engine. In pug, for example, I can embed Javascript, but template engines do not seem to be made to implement user events - because in the documentation as well as here on Stack Overflow I don't find a "standard solution" for embedding JS scripts, at best workarounds and embedding JS directly in pug (not the reference to a script). For example here: render inline Javascript with jade/pug

I also tried to include a script myself:

Pug file

doctype html
html
  head
    title= `${title}  
  body
    h1 My new App
    block content
  script(src="myscript.js").

JS Script

window.alert("Bingo!");

Html-Result

<!DOCTYPE html>
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <h1>My new App</h1>
    </body>
    <script src="myscript"></script>
  </html>

The code seems to be correct, but it does not work.

So do I understand that template engines are not the right approach to implement user events? If this is correct, is client-only Javascript the better approach?

Does your script file loads in the browser? Looks like path `myscript` is not correct. — Anastazy, May 23 '20 at 14:37
Its in the sage folder as the pug file, so it should load, I assume (missing file extension, by the way, is a copy paste error). — Pjoern, May 23 '20 at 15:34
Here ([link](https://stackoverflow.com/questions/45676302/absolute-path-in-pug)) I have found a working solution for me to integrate a script via pug. — Pjoern, May 23 '20 at 20:09
@Pjoem Yeah, thats why I asked if the script loads in the browser. If browser cant find it and you get 404 error, then you mistyped the path to file, path is incorrect, or your server do not serve this file. Your linked solution seem to point to the third case (file not being served by server). This has nothing to do with pug or browser events. — Anastazy, May 24 '20 at 06:58

score 0 · Answer 1 · answered May 23 '20 at 16:21

To simply put, the template engine is for combining your data with HTML at the server-side and sent it to the client ( here the browser ). Events generated in the browser can be listened by javascript listeners. The code for that can be embedded in the templates with scripts tag/src. These scripts will be active once the page is loaded at the browser. An EJS example.

<input type="text" id="username" oninput="myKeypressFunction()">

<p id="out"></p>

<script>
function myKeypressFunction() {

  let data = document.getElementById("username").value;

  document.getElementById("out").innerHTML = "Text: " + data;
}
</script>

Thanks for clarification. But the question was whether it is the right way to realize a user events based app with NodeJS and a template engine. — Pjoern, May 23 '20 at 20:06

User events with template engines like pug?

1 Answers1