Диапазон шаблонов Golang (для цикла) с использованием JSON из WebSocket

Question

Я использую Gorilla Websocket для обновления некоторого HTML (img src, text и т. Д.); Я делаю это следующим образом:

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> 

Вы можете увидеть 0 в HTML-идентификаторах, и я должен отметить, что это намного дольше, но я старался брать только соответствующие части.

Я бы, конечно, не набирал HTML вручную, так как это затруднит (/ невозможно) иметь дело с разными длинами (например, иногда я могу отображать сто приложений, в других случаях, возможно, только 3 доступны и т. Д.).)

Я думал, что это может быть в состоянии сделать с помощью golang HTML-{} {} диапазон функции, но я не могу понять, как интегрировать его с JSON данными WebSockets ..

Другое решение, что должен быть управляемым только для того, чтобы просто выписать весь HTML внутри цикла JS для ws.onmessage, но я думаю, было бы лучше, если бы я научился делать это с помощью пакета шаблонов golang. Тем более, что он очень длинный и существует много классов/id's.

Как я вижу это, мне нужно получить длину 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> 

Установите внутренний HTML в Див, когда принимается сообщение:

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

Этот решение не использует JSON.