2012-11-20 34 views
0

我有一個網頁,從數據庫記錄到Google App Engine中的Django html模板。是否有可能異步加載帖子,例如當用戶在頁面上滾動10個帖子時,它會加載另外10個帖子?我應該在具有某種jQuery的模板中執行此操作,還是異步數據庫提取?如何異步加載數據庫中的帖子到谷歌應用引擎上的django模板?

class MainHandler(webapp2.RequestHandler): 
    def get(self): 
     records_query = db.GqlQuery("SELECT * FROM Record order by date desc") 
     records = records_query.fetch(10) 
     self.response.out.write(records_query) 
     template_values = { 
      'records': records, 
     } 
     path = os.path.join(os.path.dirname(__file__), 'index.html') 
     self.response.out.write(template.render(path, template_values)) 

class Page(webapp2.RequestHandler): 
    def get(self,page): 
     numberOfPages = int(page) 
     records_query = db.GqlQuery("SELECT * FROM Record order by date desc") 
     records = records_query.fetch(numberOfPages * 10) 
     records = records[((numberOfPages- 1) * 10):] 
     template_values = { 
      'records': records, 
     } 
     path = os.path.join(os.path.dirname(__file__), 'index.html') 
     self.response.out.write(template.render(path, template_values)) 

在模板中它只是通過從DB

{% for record in records %} 
{{ record.title }} {{ record.body }} 
{% endfor %} 
+2

您必須使用JavaScript並使用「無限滾動」插件或其他腳本。 –

+1

一些演示可以查看:http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/。我需要一個處理程序來實際從數據庫獲取數據,並且腳本將調用該處理程序,然後將新數據插入到頁面中。 – Sologoub

+0

不錯,我找到了一個解決方案即時通訊。我會在完成編碼後發佈答案。 – hakonbogen

回答

1

發送記錄的普通循環這是我的解決方案。當您滾動到底部時,它現在會異常加載。它基於從this site

Template.html第二個例子:

<div id="postswrapper"> 
        <div class="item">content</div> 
        <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div> 
    </div> 
    <script type="text/javascript"> 
     var pageCounter = 2; 
     $(window).scroll(function() 
     { 
      if (pageCounter > 0) 
      { 
       if($(window).scrollTop() == $(document).height() - $(window).height()) 
       { 
        $('div#loadmoreajaxloader').show(); 
        $.ajax({ url: "./page/" + pageCounter , success: function(html) { 
          if(html) 
          { 
           $("#postswrapper").append(html); 
           $('div#loadmoreajaxloader').hide(); 
           pageCounter++; 
          }else 
          { 
           pageCounter = -1; 
           $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>'); 
          } 
         } 
        }); 
        pageCounter = -1; 
       } 
      } 
     }); 
    </script> 

這是主要的方法,它加載從DB職位PY。

class Page(webapp2.RequestHandler): 
    def get(self,page): 
     numberOfPages = int(page) 
     records_query = db.GqlQuery("SELECT * FROM Record order by date desc") 
     records = records_query.fetch(numberOfPages * 10) 
     records = records[((numberOfPages- 1) * 10):] 
     if len(records) > 0: 
      template_values = { 
      'records': records, 
      } 
      path = os.path.join(os.path.dirname(__file__), 'posts.html') 
      self.response.out.write(template.render(path, template_values)) 

這是載入主模板的模板,多數民衆贊成。 posts.html

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
{% for record in records %} 
<div class="oneRecord"> 
    <img src="{{ record.imageCacheURL }}" /> 
    <a href ="./{{ record.imageID }}"> {{ record.title|escape }}</a> 
</div> 
{% endfor %} 
</body> 
</html> 
相關問題