1

私は自分のページに無限スクロールjqueryプラグインを使用しています。無限スクロールは、backbone.jsを実装する前に私のページで正常に機能します。ページ付けリンクは、LaravelPHPフレームワークによって作成されました。

問題:しかし、backbone.jsを利用するようにコードを変更した後、無限スクロール機能が機能しなくなりました。これは、バックボーンがビューをロードする前にプラグインがロードされたためかどうか疑問に思います。そのため、プラグインは何も認識せず、現在のページに追加する要素がこれ以上ないと考えます。もしそうなら、どうすればこの問題を解決できますか?そうでなければ、何が起こったのでしょうか?ありがとう!

JSコード

// Routers

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'explore'
    },

    explore: function() {
        this.photoList = new PhotoCollection();
        var self = this;
        this.photoList.fetch({
            success: function() {
                self.photoListView = new PhotoListView({collection: self.photoList });
                self.photoListView.render();

                var container = $('#photo_list');
                container.infinitescroll({
                    navSelector  : "#pagination",            // selector for the paged navigation (it will be hidden)
                    nextSelector : "#pagination a",    // selector for the NEXT link (to page 2)
                    itemSelector : "#photo_list .photo_box",          // selector for all items you'll retrieve
                    loadingText  : 'Loading...'
                 }, function( newElements ) {
                    console.log('added!');
                    var newElems = $( newElements );
                    container.append(newElems); // this line of code is not tested
                  }
                );

            }
        });
    }

});

var app = new AppRouter();
Backbone.history.start();

HTML

<div id="pagination" style="display: none; ">
     <div class="pagination">
        <span class="previous_page disabled">« Previous</span> 
        <span class="current">1</span> 
        <a href="http://domain.com/explore?page=2">2</a> 
        <a href="http://domain.com/explore?page=3">3</a> 
        <a href="http://domain.com/explore?page=4">4</a> 
        <a href="http://domain.com/explore?page=5">5</a> 
        <a href="http://domain.com/explore?page=2" class="next_page">Next »</a>
     </div>        
</div>
4

0 に答える 0