2013-04-22 60 views
2

我需要將大量PHP生成的HTML(5000個div元素)附加到文檔片段並將其附加到頁面主體。將PHP生成的HTML附加到文檔片段中

例HTML(這僅僅是StackOverflow的源的一部分,但它是相似的):

<div itemscope itemtype="http://schema.org/Article"> 
<link itemprop="image" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png"> 
<div id="question-header"> 
    <h1 itemprop="name"><a href="https://stackoverflow.com/questions/4287357/access-php-variable-in-javascript" class="question-hyperlink">Access PHP variable in JavaScript [duplicate]</a></h1> 
</div> 
<div id="mainbar"> 



<div class="question" data-questionid="4287357" id="question"> 

      <div class="everyonelovesstackoverflow" id="adzerk1"> 
     </div> 


    <table> 
     <tr> 
      <td class="votecell"> 


<div class="vote"> 
    <input type="hidden" value="4287357"> 
    <a class="vote-up-off" title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a> 
    <span class="vote-count-post ">2</span> 
    <a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)">down vote</a> 

    <a class="star-off" href="#" title="This is a favorite question (click again to undo)">favorite</a> 
    <div class="favoritecount"><b>1</b></div> 


</div> 

我已經打破了問題分爲2點較小的問題:在Javascript

  1. 商店PHP可變:var tmp = "<?php Print($DOM); ?>";
  2. 將HTML添加到文檔片段中(查看this但它是關於其他內容)

我該如何得到這個工作?

+0

在PHP中存儲PHP變量:http://php.net/manual/en/function.json-encode.php – Saturnix 2013-04-23 00:24:07

+0

您如何使用PHP生成HTML代碼並將其打印出來?你爲什麼不能那樣做? – Saturnix 2013-04-23 00:25:25

+0

這就是我最初一直在做的事情,但我想通過使用文檔片段來了解是否有性能提升。目前,加載需要5秒鐘的時間,因爲我正在經歷多個循環並將HTML打印出來。由於有超過5000個div,不得不經常抓取數據和繪畫似乎會大大減緩它的速度。 – theintellects 2013-04-23 00:34:01

回答

1

我最近一直在使用jsrender來處理將大量的JSON/Javascript數據格式化爲HTML。這使我可以將更多的數據打包成更少的字節,然後讓客戶端使用模板創建大量的HTML。下面是一個簡單的例子:

<html><head> 
    <script type="text/x-jsrender" id="historyTemplate"> 
     {{if orders}} 
      <h1>Your Order History</h1> 
      <table> 
       <thead> 
        <tr><th>Order Name</th><th>Amount</th><th>Status</th><th>Tracking</th></tr> 
       </thead> 
       <tbody> 
        {{for orders}}<tr> 
         <td><a href="{{>orderId}}" class="orderDetailLink">{{>orderName}}</a></td> 
         <td>{{>total}}</td> 
         <td>{{>status}}</td> 
         <td>{{if trackingNumber}} 
          <a target="_new" href="{{:trackingURL}}">{{>trackingNumber}}</a> 
         {{/if}}</td> 
        </tr>{{/for}} 
       </tbody> 
      </table> 
     {{else}} 
      <h1>You have no prior webstore orders.</h1> 
     {{/if}} 
    </script> 

    <script type="text/javascript"> 
     var customer = { 
      name: 'Joe Bloe', 
      orders: [ 
       { orderName: 'Joe Bloe 2013/04/01 #595', 
        total: 59, 
        status: 'Not yet shipped', 
        trackingNumber: null, 
        trackingUrl: null 
       }, 
       { orderName: 'Joe Bloe 2013/04/15 #876', 
        total: 32.50, 
        status: 'Shipped', 
        trackingNumber: '55512345', 
        trackingUrl: 'http://www.shipper.com/track?55512345' 
       }, 
      ] 
     }; 
     $("#orderDiv").html($('#historyTemplate').render(customer)); 
    </script> 
</head><body> 
    <h1>Your Order History</h1> 
    <div id="orderDiv"> </div> 
</body></html> 

的數據可以是在網頁的一部分,當它是服務,或者它可以通過AJAX或JSONP到達,或者它可以由客戶端本身動態地生成。到目前爲止,我從來沒有遇到性能問題。

+0

我會給jsrender一個嘗試,謝謝! – theintellects 2013-04-23 16:44:20