javascript - 如何使用 AJAX 执行 Pug for 循环？

Question

我正在使用 Node.js、Express 和 Pug 为学校开发一个 Tinder 克隆 Web 项目，该项目需要返回潜在的匹配项，并优先考虑与当前用户的距离或与当前用户共享的相似兴趣。当用户第一次进入潜在匹配页面时，我让网站根据距当前位置 5 公里的距离自动向用户显示可能的最佳匹配。我正在向页面发送一个名为 users 的匹配数组，以及一个名为 userslen 的数组大小，该数组是我从 Node 文件中的数据库中提取的。然后，我继续使用这个 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
      - }

我的页面顶部有两个按钮(上面的代码中未显示)，允许用户选择基于距离或基于带有最小和最大距离/公共(public)标签输入的标签进行搜索。当他们点击他们选择的按钮以及输入的最小值最大值时，我通过 AJAX 将数据发送到一个帖子，然后根据这个新数据返回一个新的潜在匹配数组。有没有办法在我的 AJAX 响应成功后使用 jQuery 来制作与上面代码中相同的 for 循环？如果有的话，最好的方法是什么？预先感谢您的帮助!

Answer 1

一旦您进入客户端，您就无法返回 Jade/Pug。 Jade 是一个运行在 Node 上的模板引擎。一旦您进入客户端，它就不再存在。

您只需要在 jQuery 中循环 HTML，并且无法使用 Jade 来实现此目的。

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

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

使用模板框架之一，您可以在 Jade 中定义模板，然后在迭代中重用它