使用来自 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's 中看到 0，我应该注意到它要长得多，但我试图只取相关部分..

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

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

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

按照我的看法，我需要获取 JSON (Object.keys(d).length;) 的长度，然后我需要以某种方式将此长度传递到 {{range}} 内，然后可以使用{{index}} 通过 JSON 对象进行交互..

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

Answer 1

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

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

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。

使用来自 WebSocket 的 JSON 的 Golang 模板范围（for 循环）

Golang Template Range (for loop) using JSON from WebSocket

html

javascript

go

websocket

go-html-template