私は自分のページに無限スクロール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>