javascript - 如何使用 websockets 更改模板？

Question

我想将页面拆分成片段并使用网络套接字更改它们而无需重新加载页面。

 {{define "index"}}
 {{template "head"}}
  <div class = "scene">
     {{template "main"}}
   </div>

{{template "foot"}}
{{end}}

我从客户端读取 json 并找出要打开的页面。

func webSocketHandler(conn *websocket.Conn) {

 data := conn.ReadJSON(&msg)

 if data != nil {
    log.Fatal(data)
    return
 }

  LoadVista(msg.Temp,conn)
}
var (
indexTemplate = template.Must(template.ParseFiles(indexVista,mainVista,headVista,footVista 
))
loginTemplate = template.Must(template.ParseFiles(loginVista))
)

func LoadVista(nameTemplate string, conn *websocket.Conn) {
 switch nameTemplate {
 case "page2":
    templateWsRender(nameTemplate,conn)
 }

}
func templateWsRender(name string,conn *websocket.Conn){
//defer conn.Close()
 var buf  bytes.Buffer
 data := page2Template.ExecuteTemplate(&buf,name,nil)
 if data!=nil{
    log.Fatal(data)
 }
 err := conn.WriteMessage(1,buf.Bytes())
 if err!=nil{
    log.Fatal(err)
 }

}

客户端代码

var socket = new WebSocket('ws://localhost:7030/ws' )

socket.onmessage = function (event) {
  var message = event.data
  loadVista(message)
}

elem.addEventListener( "click" , sendQuery);
function sendQuery() {
  var page = {
    query_type :"openLink",
    temp: "page"
 }
var event = JSON.stringify(page);

socket.send(event);
}

function loadVista(message) {
//alert(message)
document.getElementById('scene').innerHTML = message.data;
}

但是“主”模板并没有改变为“第2页”模板。就如何使用 Go + js (webscokets) 正确组织模板的更改提供建议。谢谢!

Answer 1

有必要指定id。; <div id= "scene">
{{template "main"}}
</div>

改为<div class = "scene">
{{template "main"}}
</div>

因为我要按 Id 而不是按类别查找。 document.getElementById('scene').innerHTML = message