如何在 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（保存 json 的位置）創建一個名為 loadData() 的函數，並在 for 循環中調用函數。 我怎么能用哈巴狗做到這一點？

Answer 1

問題在於您混合了兩種完全不同的范式 - pug 用於在服務器上呈現頁面，而滾動加載使用 AJAX 從客戶端分塊加載頁面。

您可以使用 pug 來呈現頁面的框架，但是您需要某種形式的支持 AJAX 的插件來在滾動時進行動態加載。 您可以使用 pug 來呈現處理所有這些邏輯的“外部框架”，您甚至可以使用 pug 來呈現您在滾動時加載的頁面部分，但是沒有辦法讓 pug 協調這些零碎的加載。

因此，如果沒有另一個關鍵的軟件來處理滾動加載，那么您所要求的實際上是不可能的。