AJAXでPug forループを実行するには？

Question

私は、現在のユーザーまたは現在のユーザーと共有されている同様の関心事からの距離に基づいて潜在的な一致を返す必要があるNode.js、Express、およびPugを使用して、学校用のTinderクローンWebプロジェクトに取り組んでいます。ユーザーが初めて一致する可能性のあるページを入力すると、サイトは現在の位置から5kmの距離に基づいてユーザーに最良の一致を自動的に表示します。私はページに私はユーザーと呼ばれる一致の配列をレンダリングし、私のノードファイル内のデータベースから引っ張ったuserslenという配列のサイズを送信しています。私は、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 
     - } 

ユーザーが検索し選択することができます（上記のコードには示されていない）私のページの上部に2つのボタンがあります。距離に基づいて、または最小および最大距離/タグ共通入力を有するタグに基づいて、彼らが入力した最小の最大値で選択したボタンをクリックすると、AJAXを介してポストにデータが送信され、この新しいデータに基づいて潜在的な一致の新しい配列が返されます。上記のコードでループを作成する方法はありますか？AJAXの応答が成功すればjQueryを使用しますか？もしあれば、それについて最善の方法は何ですか？ご協力いただきありがとうございます！

Answer 1

あなたはクライアントにいったん戻ってJade/Pugに戻ることはできません。 JadeはNodeで動作するテンプレートエンジンです。一度あなたがクライアントにいると、もう存在しません。

jQueryでHTMLをループするだけで、Jadeを使用することはできません。

別のオプションは、あなたがjQueryのを使用することができますよりもはるかにエレガントにループ処理することができ、これらを使用してUnderscore templates/Handlebars/Moustache JSなど

のようなクライアント側のテンプレートフレームワークの1つを使用することであるが、もちろん、そのこれはワイヤーを介して追加のペイロードを意味するので、実際にあなたが取るべき呼び出しです。テンプレートフレームワークの1つで

、あなたは翡翠でテンプレートを定義し、あなたの反復