javascript - 实现一个异步加载和呈现的列表

Question

我必须在我的网站中实现一个列表，其行为如下：

1.　在主页中，呈现一个列表并仅显示前 12 项，然后是“加载更多...”按钮。

2.　页面加载完成后，接下来的12个数据应该被预加载。

3.　当点击“加载更多”时，加载的12个被渲染，紧接着下一个被预加载，以此类推……

我的应用程序正在使用 node.js、express.js、jQuery、ejs 和 bootstrap。

现在，我的服务器逻辑成功生成了数据列表，然后我使用 ejs 模板来渲染整个大列表。

我对如何使用 ajax 将其更改为动态列表感到非常困惑。

“第一次渲染”是否仍应使用来自服务器的 ejs 完成，然后任何添加的列表项都将使用 ejs 再次渲染，但这次是从客户端？实现我需要的行为的最佳/简单方法是什么？顺便说一句-每个列表项都包含一个直接指向唯一图像的 img 标签-在使用 JSON 时这不是问题...吗？

任何帮助或有用示例的链接 - 将不胜感激。谢谢。

Answer 1

据我所知，您的 AJAX 调用有两种选择。一种是将 JSON 返回到浏览器并使用客户端模板库来呈现数据。另一种选择是仅在服务器上呈现列表并将 HTML 返回到浏览器，然后您可以将其直接插入 DOM。

您将需要在 express 中设置不同的路由，以便它仅返回列表项的 JSON 或 HTML，而不是第一次加载时的整个 HTML 文档。

将 HTML 返回到浏览器的优点是您不需要在浏览器上加载模板引擎或在浏览器和服务器中都有模板逻辑，这可以减少代码大小并保持一切干燥。但是，如果您需要将数据存储在浏览器内存中以执行其他操作，那么 JSON 是您最好的选择。

我很高兴扩展您需要使事情更清楚的任何一点。