如何解决在帕格模板中安装组件
我正在将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>`
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。