Javascript 在pug模板中安装组件

我正在将

apprun

脚本导入一个pug html模板中，以便使用它的功能。在呈现该组件后，我在哪里可以在pug模板中将JavaScript写入该组件

这是我的哈巴狗档案：

extends layout

block append scripts
  script(src='/javascripts/function.js')
  script(src="https://unpkg.com/apprun/dist/apprun-html.js")
  body
    script(src='/javascripts/frontendapp.js')
  if dev
    script(src="https://unpkg.com/apprun@latest/dist/apprun-dev-tools.js")

  script.
   app.on('//ws:', (event, state) => {
    const msg = {event, state}
    ws.send(JSON.stringify(msg))
   })
block content
  h1 MApp list - #{route}
  P
    label 現在日期:
    input.form-control(type="text" value="2020/01/01" size="10" placeholder="")#T_YMD
    label 時間: 
    input.form-control(type="text" value="00:00:00" size="8" placeholder="")#T_HMS
  P
    label 篩選器:
    input.form(type="date")#T_FYMD
    input.form-control(type="submit", text="提交")
  input.form-control(type="submit", value="ACK")
  form(method="post" action="")
    p
      label(for="name") URL: 
      textarea(name="alert_m" rows="5" cols="60" required="")
      input(type="submit")

组成部分：

const ws=newwebsocket（`ws://${location.host}`）
//前端应用程序状态
常量状态={
消息：“测试消息”，
数据：[]，
继续：是的，
}
//客户端列表器
ws.onmessage=（msg）=>{
控制台日志（msg）
const{event}=JSON.parse（msg.data）
运行（事件，JSON.parse（msg.data））
}
//观点
常量视图=（状态）=>{
回来
`
MApp列表

${headers.map（（c）=>`${c}`）}
${state.data.map（c=>`${c}`）}
`
}
//前端事件
常数更新={
“刷新”：（状态、数据）=>{
设{records}=数据
如果（记录）{
state.data=记录
}
},
'ack'：（state）=>{}，
'delete'：（state）=>{}，
“警报”：（状态）=>{}，
“关机”：（状态）=>{
ws.close（）
警报（“从服务器接收到关机。请刷新以继续。”）
},
“echo”：（状态、数据）=>{
console.log（数据）
设{msg}=data
如果（味精）{
state.msg=msg
}
警报（`Received echo message from server:${state.msg}`）
}
}
应用程序启动（document.body、state、view、update）

没有可见内容，因为从视图返回的函数为null/undefined，请用括号括起返回语句

（）

const view=（state）=>{
返回(
`
MApp列表

${headers.map（（c）=>`${c}`）}
${state.data.map（c=>`${c}`）}
`
);
}

正在编译多少个

body

元素？现在只有一个，在布局图中。。。。如果我需要创建另一个或使用div或重组。。。这很好，我可以从一个工作示例开始，并将其更改为适合我的模式。您正在通过

脚本

块添加另一个示例，但我运行它时看不到视图。。。如何使视图可见？没有可见内容，因为从视图函数返回null/undefined，请用括号（）括起返回语句

const view = (state) => {
    return (
    `<div>
        <h1>MApp list</h1>
        <p></p>
        <table>
            <thead>
                <tr>
                    ${headers.map((c) => `<th>${c}</th>`)}
                </tr>
                <tr>
                    ${state.data.map(c => `<td>${c}</td>`)}
                </tr>
            </thead>
        </table>
    </div>`
    );
}