在 Node + Express + Pug 中访问 DOM 的正确方法

Question

我正在学习将 MVC 架构与 Node、Express 和 Pug 结合使用，但我无法找到如何正确访问 DOM（在本例中为添加 EventListener）。文档非常简洁，我无法在其他地方找到解决方案...这让我怀疑我可能做错了？

这是有问题的 .pug 文件（已简化以突出显示问题）：

extends layout

block content
  h1= title
  div= foo
  div
    label Bar
      input(        
        type='text'
        name='city'
        placeholder='start typing...'
      )
      input(type='submit' id='submitbtn' value='Submit')
- document.addEventListener('keydown', event => {console.log("Bleep!")})
- document.getElementById('submitbtn').addEventListener('click', () => doSomething())
  ^^^^^^^^

当 Express 尝试呈现此页面时，出现以下错误：

Only named blocks and mixins can appear at the top level of an extending template

我是不是找错人了？如果是这样，在 Node / 中访问 DOM 的正确方法是什么？ Express / Pug 框架？

Answer 1

错误信息正确：

Only named blocks and mixins can appear at the top level of an extending template

在您的示例中，模板的顶层还有内联代码，这是不允许的。您应该缩进命名 block content.

内的那些

此外，DOM javascript 在 pug 编译时不会运行。一旦 Pug 编译成 HTML，它只会在浏览器中显示运行s。为了使该脚本成为运行，您需要将其放置在 script 元素中，就像您编写常规 HTML.

一样。

extends layout

block content
  h1= title
  div= foo
  div
    label Bar
      input(        
        type='text'
        name='city'
        placeholder='start typing...'
      )
      input(type='submit' id='submitbtn' value='Submit')
  script.
    document.addEventListener('keydown', event => {console.log("Bleep!")})
    document.getElementById('submitbtn').addEventListener('click', () => doSomething())

在 Node + Express + Pug 中访问 DOM 的正确方法

Proper way to access DOM in Node + Express + Pug

model-view-controller

dom

node.js

express

pug