無限のajaxスクロールがDjangoで動作しませんでした

Question

私のプロジェクトで無限のajaxスクロールプラグインを使用しようとしています。私はちょうど公式のウェブサイトに続き、必要なjavascriptファイルを含んでいます。以下は私のコードです：

<div class="row"> 
    <div class="col-lg-4"> 
     <div class="bootstrap-card"> 
     <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag"> 
     <div class="overlay"> 
     <a class="info" href="#">View Details</a> 
     </div> 
     </div> 
    </div> 

    <div class="col-lg-4"> 
     <div class="bootstrap-card"> 
     <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag"> 
     <div class="overlay"> 
     <a class="info" href="#">View Details</a> 
     </div> 
     </div> 
    </div> 

    <div class="col-lg-4"> 
     <div class="bootstrap-card"> 
     <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag"> 
     <div class="overlay"> 
     <a class="info" href="#">View Details</a> 
     </div> 
     </div> 
    </div> 
</div> 

<script src="{% static 'hw1/js/callback.js' %}"></script> 
<script src="{% static 'hw1/js/jquery-ias.min.js' %}"></script> 

<div id="pagination"> 
    <a href="page2.html" class="next">next</a> 
</div> 

<script> 
    $(document).ready(function() { 
     var ias = jQuery.ias({ 
     container: '.row', 
     item: '.col-lg-4', 
     pagination: '#pagination', 
     next: '.next', 
     delay: 1250 
     }); 
    }); 

    ias.extension(new IASSpinnerExtension()); 
    ias.extension(new IASTriggerExtension({offset: 2})); 
    ias.extension(new IASNoneLeftExtension({text: "You reached the end"})); 
</script> 

だからここのpage2.htmlは別のページです。

エラーメッセージがあるだから、なぜ誰もが知っているん：

(index):244 Uncaught ReferenceError: ias is not defined(…)(anonymous function) @ (index):244 jquery-3.1.1.min.js:2 jQuery.Deferred exception: jQuery.ias is not a function TypeError: jQuery.ias is not a function at HTMLDocument. (http://localhost:8000/:235:24) at j (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:29948) at k (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:30262) undefined

Answer 1

あなたはスコープの問題を持っています。 var iasをjQuery readyコールバック内に定義しますが、そのコールバックの外部でias変数を参照しようとしています。そのコールバックの外には、ias変数は存在しません。さらに、コールバックは非同期であるため、DOMが完全にロードされるまでコールバックは呼び出されません。つまり、ias.extension()への呼び出しは、ページにロードするチャンスがなくなる前に起きているため、最初にreadyコールバックが存在します。

この問題を解決するには、ias.extension()にコールバックを入れてください。コールバックには、jqueryとiasの両方が初期化されているスコープ内にあるようにしてください。

$(document).ready(function() { 
    var ias = jQuery.ias({ 
    container: '.row', 
    item: '.col-lg-4', 
    pagination: '#pagination', 
    next: '.next', 
    delay: 1250 
    }); 

    ias.extension(new IASSpinnerExtension()); 
    ias.extension(new IASTriggerExtension({offset: 2})); 
    ias.extension(new IASNoneLeftExtension({text: "You reached the end"})); 
});