Question

我正在使用Node.js，Express和Pug为学校开展Tinder克隆网络项目，该项目需要返回潜在匹配，优先级与当前用户的距离或与当前用户共享的类似兴趣。当用户首次进入他们的潜在匹配页面时，我会让该网站根据距离当前位置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上运行的模板引擎。一旦您进入客户端，它就不再存在了。

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

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

使用这些，您可以比使用jQuery更优雅地处理循环，但当然，这确实是您应该采取的调用，因为这将意味着通过线路的额外有效负载。

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

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

1 个答案: