2017-09-20 8 views
1

私は多くの発表をしたウェブサイトを持っています。Symfony 3発表のための無限のスクロール

私の発表には無限のスクロール読み込みが必要です。

は実は、これは私が私のtwig.html

{% extends 'base.html.twig' %} 
{% block body %} 

</br> 
     <div class="container"> 


     <!-- Menu --> 

     {% include '::announce/menu.html.twig' %} 


     {% for announce in announces|slice(0, 4) %} 

     <!-- Detail Announce --> 

      {% include '::announce/' ~ game ~ '/preview.html.twig' %} 

     {% endfor %} 

    </div> 

{% endblock %} 

で、私はその

{% block javascripts %} 

<script type="text/javascript"> 
     jQuery(document).ready(function($) { 
      var count = 2; 
      $(window).scroll(function(){ 
        if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
         loadArticle(count); 
         count++; 
        } 
      }); 

      function loadArticle(pageNumber){ 
        $('a#inifiniteLoader').show('fast'); 
        $.ajax({ 
         url: "{{ asset('ajax/ajax.html.twig') }}", 
         type:'POST', 
         data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
         success: function(html){ 
          $('a#inifiniteLoader').hide('1000'); 
          $("#content").append(html); // This will be the div where our content will be loaded 
         } 
        }); 
       return false; 
      } 

     }); 

しかし、すべてのループのようなものを追加しようとしたもので、私は、HTMLテキストを得たが、小枝にはありません私のajax/ajax.html.twigで動作します。私の以前のコードで

{% for announce in announces|slice(NBR, NBR+4) %} 

それとも補正をスクロールしたとき

あなたがループを作るための、よりシンプルな機能を持っていますか?

おかげで、私はここで2つの問題を見ることができます

答えて

1

すべて:

  • あなたの小枝ファイルをレンダリングする必要があり、
  • あなたは発表の多くを持っている場合、あなたのメカニズムが非常に遅くなります。

連続スクロール機能を別の方法で開発することに成功しました。 一度にすべての記事を読み込むのではなく、ページを読み込むだけで済みました。 Ajaxコールは、次のページを引数の1つとしてコントローラのメソッドに対して作成されました。

コントローラのメソッドはリポジトリと呼ばれ、次の記事の量を正確に取得し、レンダリングされた小枝ファイルで返します。