2013-04-22 47 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

相关问题