1. 首页
  2. 问题
  3. 使用模板在Golang中创建更多加载按钮
小编典典

使用模板在Golang中创建更多加载按钮

go

我想创建一个类似Facebook的页面，如果用户向下滚动页面，则无需刷新即可获取旧帖子。我之前已使用Ajax完成此操作，并使用JS附加了HTML页面。

但是，由于我现在正在使用Go及其模板来构建页面，因此我不确定如何获得类似的结果。请帮我提出您的建议。

{{range .posts}}
 <<in side the range brackets, I am showing the posts >>
{{end}}
out side range I have created load more button which calls 
the js which internally fetch the posts slice.

下面的链接显示了一种解决方案，但不适用于大量数据，因此很难在js中创建所有这些按钮。更新变量后，动态刷新模板的一部分

感谢帮助。


阅读 287

收藏
2020-07-02

共1个答案

小编典典

您在问题中链接的其他答案包含实现 _“加载更多…”_功能所需的所有详细信息和技巧：更新变量golang时动态刷新模板的一部分

是的，这并非微不足道，但也不是那么困难/复杂。该答案讨论了不同的方法/替代方法，但显然一个解决方案仅需要一个。

在这里，我展示了一个可行的解决方案。Load more此处的按钮不会“记住”最近返回的帖子，它只会检索2条新帖子。想一想如何实现发回最后一个ID，并在请求更多ID时在其后发送记录。

完整的，可运行的应用程序代码可以在Go
Playground上找到。当然，您不能在Go
Playground上运行它，不能将其保存在本地并在计算机上运行。

因此，我们将与以下Post实体合作：

type Post struct {
    User, Time, Text string
}

我将使用以下模板：

<html><body><h2>Posts</h2>
{{block "batch" .}}
    {{range .posts}}
        <div><b>{{.Time}} {{.User}}:</b> {{.Text}}</div>
    {{end}}
    <div id="nextBatch"></div>
{{end}}
<button onclick="loadMore()">Load more</button>
<script>
    function loadMore() {
        var e = document.getElementById("nextBatch");
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                e.outerHTML = xhr.responseText;
            }
        }
        xhr.open("GET", "/posts/more", true);
        try { xhr.send(); } catch (err) { /* handle error */ }
    }
</script>
</body></html>

它包含一个{{block "batch" .}}用于列出帖子的块，还为下一个批处理（<div id="nextBatch">）呈现一个占位符。接下来，它包含一个Load More按钮，按下该按钮时，它将以呈现的形式获取下一批，并替换占位符。渲染的下一批还包含下一批的占位符。

我链接的另一个答案中详细介绍了用于进行AJAX调用的javascript函数。

执行此模板的处理程序：

var t = template.Must(template.New("").Parse(page))

var lastTime = time.Now()

func produceTime() string {
    lastTime = lastTime.Add(time.Second)
    return lastTime.Format("15:04:05")
}

func postsHandler(w http.ResponseWriter, r *http.Request) {
    // Put up some random data for demonstration:
    data := map[string]interface{}{"posts": []Post{
        {User: "Bob", Time: produceTime(), Text: "The weather is nice."},
        {User: "Alice", Time: produceTime(), Text: "It's raining."},
    }}
    var err error
    switch r.URL.Path {
    case "/posts/":
        err = t.Execute(w, data)
    case "/posts/more":
        err = t.ExecuteTemplate(w, "batch", data)
    }
    if err != nil {
        log.Printf("Template execution error: %v", err)
    }
}

produceTime() 只会产生单调递增的时间戳字符串，因此输出看起来很有意义。

以及main()注册处理程序并启动服务器的功能：

func main() {
    http.HandleFunc("/posts/", postsHandler)
    panic(http.ListenAndServe(":8080", nil))
}

就是这样。这是一个正在运行的应用程序。输入http://localhost:8080/posts/浏览器，您将看到：

帖子

09:42:29 Bob： 天气很好。
09:42:30爱丽丝： 下雨了。
Load more

按下Load more按钮，浏览器中的内容将被动态刷新，而无需重新加载页面。新内容：

帖子

09:42:29 Bob： 天气很好。
09:42:30爱丽丝： 下雨了。
09:42:31鲍勃： 天气很好。
09:42:32爱丽丝： 下雨了。
Load more

再次按下：

帖子

09:42:29 Bob： 天气很好。
09:42:30爱丽丝： 下雨了。
09:42:31鲍勃： 天气很好。
09:42:32爱丽丝： 下雨了。
09:42:33鲍勃： 天气很好。
09:42:34爱丽丝： 下雨了。
Load more

2020-07-02