javascript - 如何在 pug 和 javascript 中滚动并加载更多 json 数据？

Question

这是我的哈巴狗文件

        for specificBike in allBikeData        
          .bikeshop-card.border.border-dark.bg-white.m-3.p-4
            li
              img.shop-image.border.border-dark(src=specificBike.image, onerror="this.onerror=null; this.src='https://imgur.com/qzN3r1U.png'" alt="")
            li
              img(src=specificBike.logo, alt="")
            li
              a.text-dark(href=specificBike.website)
                h3.font-weight-bold=specificBike.shopname
            li
              h4=specificBike.contact
            li
              h4
                span.glyphicon.glyphicon-earphone 
                p=specificBike.phone
            li
              h4
                span.glyphicon.glyphicon-home
                p=specificBike.address
            li
              a.btn.btn-success(href=specificBike.facebook) Facebook
              a.btn.btn-success.ml-1(href=specificBike.instagram) Instagram

这是我的脚本:

  script.
    allBikeData = !{JSON.stringify(allBikeData)}

    const addMoreJson = (num) => {
        for(let i = 0; i < num; i++)
          loadData()
    }
    addMoreJson(12)

我试图每页显示 12 个数据，当您向下滚动时，会加载另外 12 个数据，依此类推。我在 pug 中遇到问题，我尝试为 allBikeData 创建一个名为 loadData() 的函数(这是保存 json 的位置)并在 for 循环内调用该函数。我怎样才能用哈巴狗做到这一点？

Answer 1

问题在于，您混合了两种完全不同的范例 - pug 用于在服务器上呈现页面，而滚动加载使用 AJAX，它从客户端分块加载页面。

您可以使用 pug 来呈现页面的框架，但您需要某种形式的支持 AJAX 的插件来在滚动时进行动态加载。您可以使用 pug 来渲染负责所有这些逻辑的“外部框架”，甚至可以使用 pug 来渲染滚动时加载的页面片段，但是没有办法让 pug 协调分段加载。

因此，如果没有另一个关键软件来处理滚动加载，您所要求的实际上是不可能实现的。