在帕格模板中安装组件

问题描述

我正在将apprun脚本导入到哈巴狗html模板中，以便可以使用其功能。 (reference)呈现后，在哪里可以在哈巴狗模板中的mount这个组件中编写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 = new WebSocket(`ws://${location.host}`)

//front-end application state
const state = {
    msg: 'Test Message',data: [],continue: true,}
//client-side listenr 
ws.onmessage = (msg) => {
    console.log(msg)
    const { event } = JSON.parse(msg.data)
    app.run(event,JSON.parse(msg.data))
}

//views 
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>`
}


//frontend events
const update = {
    'refresh': (state,data) => {
        let { records } = data
        if (records) {
            state.data = records
        }
    },'ack': (state) => { },'delete': (state) => { },'alert': (state) => { },'shutdown': (state) => {
        ws.close()
        alert("Recieved shutdown from server. Refresh to continue.")
    },'echo': (state,data) => {
        console.log(data)
        let { msg } = data
        if (msg) {
            state.msg = msg
        }
        alert(`Received echo message from server: ${state.msg}`)
    }
}

app.start(document.body,state,view,update)

解决方法

什么都看不到，因为从视图函数中返回了null / undefined，并用括号()将您的return语句括起来。

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>`
    );
}