如何在 pug 和 javascript 中滚动和加载更多 json 数据? [英] How to scroll and load more json data in pug and javascript?

问题描述

这是我的哈巴狗文件

        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(保存 json 的位置)创建一个名为 loadData() 的函数，并在 for 循环中调用函数.我怎么能用哈巴狗做到这一点?

I'm trying to display 12 data per page, and as you scroll down, another 12 data load and so on. I'm having a problem figuring it out in pug, I've tried creating a function called loadData() for the allBikeData(which is where the json is being kept) and calling the funtion inside the for loop. How can I do this with pug?

推荐答案

这个问题是你混合了两种完全不同的范式——pug 用于在服务器上呈现页面，而滚动加载使用 AJAX从客户端加载页面.

The issue with this is that you're mixing two completely different paradigms - pug is used to render a page on the server, and scroll-loading uses AJAX which loads the page in pieces from the client.

您可以使用 pug 来呈现页面的框架，但是您需要某种形式的支持 AJAX 的插件来在滚动时进行动态加载.您可以使用 pug 来呈现处理所有这些逻辑的外部框架"，您甚至可以使用 pug 来呈现您在滚动时加载的页面部分，但是没有办法让 pug 协调这些零碎的加载.

You can use pug to render the framework of the page, but you'll need some form of AJAX-enabled plugin to do the dynamic loading as you scroll. You could use pug to render the "outer framework" that takes care of all this logic, and you can even use pug to render the pieces of the page you load as you scroll, but there's no way to make pug orchestrate the piecemeal loading.

因此，如果没有其他关键软件来处理滚动加载，您所要求的实际上是不可能的.

So, effectively what you're asking for is not possible without another key piece of software to handle the scroll-loading.

这篇关于如何在 pug 和 javascript 中滚动和加载更多 json 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！