使用模板在Golang中创建更多加载按钮
我想创建一个类似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中创建所有这些按钮。更新变量后，动态刷新模板的一部分
感谢帮助。
问题答案：
您在问题中链接的其他答案包含实现 _“加载更多…”_功能所需的所有详细信息和技巧：更新变量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
-
问题内容： 我浏览了旧的问题，并尝试了许多似乎可以做到的不同方法。我最接近的工作是在这里：如何在自定义WP_QueryAjax上实现分页 我已经尝试了一切，但没有用。页面上没有任何变化。如果您检查并单击“加载更多按钮”，则jQuery会执行“加载更多按钮”操作，因为它从更改为，即使对我来说，这似乎也不对。它并没有添加帖子，我想我缺少一些简单的东西，但是我一生都无法解决。 我的模板文件中的代码是：
-
问题内容： 我只是在学习Angularjs，以及如何使用templateUrl加载模板。 我有一个简单的指令： 我尝试使用这样的指令： 打开页面后，出现以下异常： 我没有确定要跨域加载模板文件（te.html与default.html处于同一折叠）。 有人可以帮我弄清楚发生了什么吗？ 问题答案： 问题是您正在使用文件协议（使用协议）运行示例，并且许多浏览器（Chrome，Opera）在使用协议时都
-
模板加载器 模板加载器是加载基于抽象模板路径下，比如 "index.ftl" 或 "products/catalog.ftl" 的原生文本数据对象。 这由具体的模板加载器对象来确定它们取得请求数据时使用了什么样的数据来源 (文件夹中的文件，数据等等)。当调用 cfg.getTemplate (这里的 cfg 就是 Configuration 实例)时， FreeMarker询问模板加载器是否已经为
-
了解如何在 Dreamweaver 中创建用于控制共享设计元素的页面中的内容的嵌套模板。 嵌套模板是指其设计和可编辑区域都基于另一个模板的模板。嵌套模板对于控制共享许多设计元素的站点页面中的内容很有用，但在各页之间有些差异。例如，基本模板中可能包含更宽广的设计区域，并且可以由站点的许多内容提供者使用，而嵌套模板可能进一步定义站点内特定部分的页面中的可编辑区域。 基本模板中的可编辑区域被传递到嵌套模
-
利用 Adobe Stock 中丰富的模板和空白预设，您可以快速着手自己的创意项目。 注意: Typekit 现已更名为 Adobe Fonts，包含在 Creative Cloud 和其他订阅中。了解详情。 在 Adobe Photoshop 2017 版本中引入 当您在 Photoshop 中创建文档时，您无需从空白画布开始，而是可以从 Adobe Stock 的各种模板中进行选择。这些模板