如何使用 AJAX 进行 Pug for 循环？

Question

我正在使用 Node.js、Express 和 Pug 为学校开发一个 Tinder 克隆 Web 项目，该项目需要返回潜在匹配项，优先考虑与当前用户的距离或与当前用户共享的类似兴趣。当用户第一次进入他们的潜在匹配页面时，我让网站根据距用户当前位置 5 公里的距离自动向用户显示最佳匹配。我发送到页面，我渲染了一个名为 users 的匹配数组和一个名为 userslen 的数组的大小，我从节点文件中的数据库中提取了该数组。然后我继续使用这个 pug for 循环在页面上显示潜在的匹配项：

div(class='container', id='searchResults') <!-- SEARCH RESULTS -->
      div(class='row')
      - for (var i = 0; i < userslen; i++) {
        div(class='col-lg-4 col-md-6 col-sm-12 col-xs-12 usertop')
          div(class='row')
            div(class='col-lg-12 col-md-12')
              a(href='/users/' + users[i].username)
                h1=users[i].username
                  - if (users[i].liked == true) {
                  span(id='youlikeglyph', class="glyphicon glyphicon-ok")
                  - } else if (users[i].disliked == true) {
                  span(id='youdislikeglyph', class="glyphicon glyphicon-remove")
                  - } else {

                  - }
          div(class='row')
            div(class='col-lg-12 col-md-12')
              img(id='viewerphoto1', class='userpagephoto', src='/static/uploads/' + users[i].filename)
          div(class='row')
            - if (users[i].liked == false && users[i].disliked == false) {
            div(class='btn-group')
              button(id='dislike' + i, class='btn btn-danger btn-lg')
                |Dislike
              button(id='like' + i, class='btn btn-success btn-lg')
                |   Like
            - } else if (users[i].liked == false && users[i].disliked == true) {
            button(id='like' + i, class='btn btn-success btn-lg')
              |Like
            - } else if (users[i].liked == true && users[i].disliked == false) {
            button(id='dislike' + i, class='btn btn-danger btn-lg')
              |Dislike
            - } else {

            - }
          div(class='row')
            div(class='col-lg-4 col-md-4')
              h5="Distance"
              h4=users[i].distance + "km"
            div(class='col-lg-4 col-md-4')
              h5="Same Tags"
              h4=users[i].cTags
            div(class='col-lg-4 col-md-4')
              h5="Popularity"
              h4=users[i].popularity
      - }

我的页面顶部有两个按钮（上面的代码中未显示），允许用户选择基于距离或基于具有最小和最大距离/常用标签输入的标签进行搜索。当他们用他们输入的最小最大值点击他们选择的按钮时，我通过 AJAX 将数据发送到一个帖子，然后根据这个新数据返回一个新的潜在匹配数组。有没有办法让我在上面的代码中使用相同的循环，但是一旦我的 AJAX 响应成功就使用 jQuery？如果有，最好的方法是什么？提前感谢您的帮助！

Answer 1

一旦您在客户端上，您将无法返回 Jade/Pug。 Jade 是一个在 Node.js 上工作的模板引擎。一旦你在客户端上，它就不再存在了。

您只需要在 jQuery 中循环遍历您的 HTML，并且无法使用 Jade。

另一种选择是使用其中一个客户端模板框架，例如 Underscore templates/Handlebars/Moustache JS 等。

使用这些，您可以比使用 jQuery 更优雅地处理循环，但当然，这确实是您应该接受的调用，因为这将意味着额外的负载。

使用其中一种模板框架，您可以在 Jade 中定义您的模板，然后将其重用于您的迭代