サーバーサイドレンダリングHTML - > JSテーブル？

Question

私は古いSymfony2プロジェクトに取り組んでおり、Twigを大量に使っています。ここ

は、単一の行のテンプレートの：

<tr> 
    <td class="centerCell"> 
     <img src="/images/social-icons/{{ review.type }}.png" title="{{ review.type }}"/> 
    </td> 
    <td data-rating="{{ review.rating }}" class="centerCell"> 
     <div class="starContainer"> 
      {% for i in 1..5 %} 
       <span class="gfsStar{% if i <= review.rating %} on{% endif %}"></span> 
      {% endfor %} 
     </div> 
     <div class="ratingBadge">{{ review.rating }}/5</div> 
    </td> 
    <td> 
     <div {% if review.content|length > 275 %} class="block-with-text" {% endif %}>{{ review.content }}</div> 
     {% if review.content|length > 275 %} <div class="over-flow-indicator">[Read more]</div> {% endif %} 
    </td> 
    <td>{{ review.time }}</td> 
    <td class="centerCell">{{ review.author }}</td> 
    <td> 
     <a class="viewButton" href="{{ review.url }}" target="_blank">View</a> 
    </td> 
</tr> 

I次いでHTMLを生成するrenderView（）メソッドを呼び出し、モデルデータをつかむコントローラを呼び出すために、AJAXを使用します。

フロントエンドに並べ替え/ページ番号を追加したいが、私が見つけたすべてのプラグインは、レンダリングされたHTMLの行を（ajax経由で）追加することはできません。ページの読み込みでは、10〜20回のレビューを表示したいだけで、ユーザーのページがいっぱいになると、サーバーからさらに多くをリクエストします。ブートストラップテーブルは素晴らしい解決策のようでしたが、テンプレートの複雑さのために、私はAjaxの機能を実装する良い方法を見つけることができませんでした。

明らかにこれは新しい問題ではありませんが、これまでに人々はこれをどのように解決しましたか？

Answer 1

ここで私自身の質問に答えるのは嫌ですが、多くの調査の後、まともな解決方法がありました。私は、HTMLサーバー側のレンダリングを避けなければならず、代わりにスマートが以前にやっていたのと同じことを達成するJavaScriptの単純な関数セットを実装しました。ここでは上記の小枝テンプレートに相当JSです：

function transformData(data) { 

    var transformedArray = []; 

    for(var i = 0; i < data.length; i++) { 
     var obj = { 
      id : data[i].id, 
      type : getTemplate('type', data[i].type), 
      author : data[i].author, 
      time : data[i].time, 
      rating : getTemplate('rating', data[i].rating), 
      content : getTemplate('content', data[i].content), 
      url : getTemplate('url', data[i].url) 
     }; 

     console.log("In loop: " + i); 
     console.dir(obj); 

     transformedArray.push(obj); 
    } 

    return transformedArray; 
} 

function getTemplate(key, value) { 

    var html = ''; 

    switch (key) { 
     case "type" : 
      html = '<img src="/images/social-icons/' + value + '.png" style="height:32px;" title="' + value + '"/>'; 
      break; 
     case "rating" : 
      html = getRatingHTML(value); 
      break; 
     case "content" : 
      html = getContentHTML(value); 
      break; 
     case "url" : 
      html = '<a class="viewButton" href="' + value + '" target="_blank">View</a>'; 
      break; 
    } 

    return html; 
} 

function getContentHTML(value) { 

    var html = '<div', 
     indicator = ''; 

    if (value.length > 275) { 
     html += ' class="block-with-text"'; 
     indicator += '<div class="over-flow-indicator">[Read more]</div>'; 
    } 

    html += '>' + value + '</div>' + indicator; 

    return html; 
} 

function getRatingHTML(value) { 
    var html = '<div class="starContainer" style="min-width: 72px">'; 

    for (var i = 1; i <= 5; i++) { 
     html += '<span class="gfsStar '; 
     if (i <= value) { 
      html += 'on'; 
     } 

     html += '"></span>'; 
    } 

    html += "</div>"; 
    html += '<div class="ratingBadge">' + value + '/5</div>'; 

    return html; 
} 

私はカスタムAjaxの方法でbootstrap-table pluginを使用しています。ここではそれは次のようになります。

function getReviewData(params, offset) { 

    $.post("/extended-review-monitor/reviews", {"limit": 10, "offset": offset}) 
     .done(function (data) { 
      console.dir(data); 

      processedData = transformData(data.data); 

      console.log("processed data"); 
      console.dir(processedData); 

      setTimeout(function() { 
       params.success({ 
        total: data.data[0].total, 
        rows: processedData 
       }); 

      }, 1000); 

     }) 
     .fail(function() { 
      console.log("ajax error"); 
     }); 

    console.log("ajax complete"); 
} 

私は本当にこれが道を他の誰かを助けて終わる願っています。