javascript - 使用来自 WebSocket 的 JSON 的 Golang 模板范围(for 循环)

Question

我正在使用 Gorilla Websocket 更新一些 HTML(img src、文本等)；我通过以下方式执行此操作:

mt, message, err := c.ReadMessage()
if err != nil {
    log.Println("read:", err)
    break
}
[...]
app, err := models.DB.SearchAppStore(ctx, stars, updatedWithin, 0)
myJson, err := json.Marshal(app)
err = c.WriteMessage(mt, myJson)
if err != nil {
    log.Println("write:", err)
    break
}

然后我使用 javascript 以这种方式更新 HTML 数据:

ws.onmessage = function(evt) {
    var d = JSON.parse(evt.data);
    var app;
    for (app = 0; app < 3; app++) {
      document.getElementById("app-icon-" + app).src = d[app].ThumbnailURL;
      document.getElementById("app-title-" + app).innerHTML = d[app].Title;
      document.getElementById("app-compatibility-" + app).innerHTML = d[app].Compatibility;
    }
  };

然后我以这种方式手动输入 HTML:

<div class="app-section">
  <div class="icon">
    <img src="" id="app-icon-0">
  </div>
  <div class="details">
    <h2 id="app-title-0"></h2>
    <h5 id="app-compatibility-0"></h5>
  </div>
</div>

您可以在 HTML 的“id”中看到 0，我应该注意到它要长得多，但我尝试只提取相关部分..

我当然不想手动输入 HTML，因为这会使处理不同的长度变得困难(/不可能)(比如有时我想显示一百个应用程序，其他时候可能只有 3 个可用，等等) ..)

我想这可能可以使用 golang 的 HTML {{range}} 函数来完成，但我不知道如何将它与来自 websockets 的 json 数据集成..

另一个应该易于管理的解决方案是在 ws.onmessage 处写出 JS for 循环内的所有 HTML，但我认为如果我学会如何使用golang 模板包.. 特别是因为它真的很长而且有很多类/id..

在我看来，我需要获取 JSON 的长度 (Object.keys(d).length;)，然后我需要以某种方式在 {{range} 中传递这个长度} 然后可以使用 {{index}} 来交互 JSON 对象..

..但我一直无法弄清楚该怎么做，也许这甚至是不可能的..我将不胜感激任何有关如何完成此操作的帮助..

Answer 1

一种简单的方法是在服务器上执行一个模板，并将生成的 HTML 发送到客户端，然后将 HTML 插入到页面中。

使用已编译模板声明包级变量。此模板假定 Execute 的参数是具有字段 ThumbnailURL、Title 和 Compatibility 的结构或映射。

var t = template.Must(template.New("").Parse(`{{range .}}
  <div class="icon">
   <img src="{{.ThumbnailURL}}">
  </div>
  <div class="details">
   <h2>{{.Title}}</h2>
   <h5>{{.Compatibility}}</h5>
  </div>{{end}}`))

在您的读取循环中执行模板。将 HTML 发送给客户端:

mt, message, err := c.ReadMessage()
if err != nil {
   log.Println("read:", err)
   break
]
[...]
app, err := models.DB.SearchAppStore(ctx, stars, updatedWithin, 0)
var buf bytes.Buffer
if err := t.Execute(&buf, app); err != nil {
    // handle error
}
err = c.WriteMessage(mt, buf.Bytes())
if err != nil {
  log.Println("write:", err)
  break
}

为页面上的结果包含一个 div:

<div class="app-section"></div>

在收到消息时设置 div 的内部 HTML:

ws.onmessage = function(evt) {
    document.getElementById("app-section").innerHTML = evt.Data;
}

此解决方案不使用 JSON。