当前位置：首页 > 文章列表 > Golang > Go问答 > 使用模板在 Golang 中创建加载更多按钮

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

来源：Golang技术栈 2023-04-21 13:10:25 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习Golang的朋友们，也希望在阅读本文《使用模板在 Golang 中创建加载更多按钮》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新Golang相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

问题内容

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

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

{{range .posts}}
 >
{{end}}
out side range I have created load more button which calls 
the js which internally fetch the posts slice.

下面的链接显示了一种解决方案，但它不适用于大量数据，在 js 中创建所有这些按钮将很困难。 [更新变量时动态刷新模板的一部分 golang](https://stackoverflow.com/questions/37118281/dynamically-refresh-a- part-of-the-template-when-a-variable-is-updated-golang)

感谢帮助。:)

正确答案

您在问题中链接的我的另一个答案包含实现 “加载更多...” 功能所需的所有详细信息和技巧：[更新变量时动态刷新模板的一部分 golang](https://stackoverflow.com/questions/37118281/dynamically-refresh-a- part-of-the-template-when-a-variable-is-updated-golang/37119014#37119014)

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

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

完整的、可运行的应用程序代码可以在Go Playground上找到。当然你不能在 Go Playground 上运行它，把它保存在本地，然后在你的电脑上运行它。

因此，我们将使用以下Post实体：

type Post struct {
    User, Time, Text string
}

我将使用以下模板：

Posts
{{block "batch" .}}
    {{range .posts}}
        {{.Time}} {{.User}}: {{.Text}}
    {{end}}
    
{{end}}

它包含一个{{block "batch" .}}用于列出帖子的块，并且还为下一批 (

)
呈现一个占位符。接下来它包含一个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 Alice： 下雨了。
Load more

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

帖子
09:42:29 Bob： 天气很好。
09:42:30 Alice： 下雨了。
09:42:31 Bob： 天气很好。
09:42:32 Alice： 下雨了。
Load more

再按一次：

帖子
09:42:29 Bob： 天气很好。
09:42:30 Alice： 下雨了。
09:42:31 Bob： 天气很好。
09:42:32 Alice： 下雨了。
09:42:33 Bob： 天气很好。
09:42:34 Alice： 下雨了。
Load more
以上就是《使用模板在 Golang 中创建加载更多按钮》的详细内容，更多关于golang的资料请关注golang学习网公众号！