백본이 포함 된 무한 스크롤 js

Question

3 일 동안이 문제로 고생했습니다. https://github.com/paulirish/infinite-scroll을 사용하여 내 백본 프로젝트를 스크롤하려고했습니다.

검색 엔진으로 제 질문에 대한 답변을 찾으려고했지만 시도 할 수 없었습니다. 저는 backbone.js으로 초급 개발자입니다. 항목 목록의

보기 : 항목 목록보기의

이

var ItemList = Backbone.View.extend({ 
    initialize: function() { 
    }, 
    render: function(){ 
     this.$el.empty(); 
     this.collection.each(function(_itemData){ 
      var itemList = new ItemView({model : _itemData}); 
      this.$el.append(itemList.el); 
     },this); 
    } 
}); 

보기 :

render: function(){ 
    var _itemList = _.template(ItemListTem); 
    this.$el.html(_itemList); 
    var _itemObj = _item.getItemSearches(this.options.key); 
    var itemColletion = new ItemCollection(_itemObj); 
    var itemListView = new ItemList({collection : itemColletion, el : '.itemListContainer'}); 
    itemListView.render(); 
}); 

항목 컬렉션 :

var itemCollection = Backbone.Collection.extend({ 
    model : itemModel, 
    url : RootWebsite 
}); 

그리고 다른 HTML로 항목 목록 및 항목 템플릿을 나누어 파일.

항목 목록 템플릿 :

<div class="itemListContainer"></div> 
<script> 
    $(document).ready(function(){ 
    $('#appendItem').infinitescroll({ 
     navSelector  : "#next:last", 
     nextSelector : "a#next:last", 
     itemSelector : "#appendItem p", 
     debug  : true, 
     loadingImg : "/img/loading.gif", 
     loadingText : "Loading new posts...", 
     animate  : true, 
     donetext  : "I think we've hit the end" , 
     appendCallback : false, 
     path: ["http://localhost/Website/#itemlist"] 
    }, function(json, opts) { 
     var page = opts.state.currPage; 
    }); 
    }); 
</script> 

항목 템플릿 :

<div class="itemTemplate"> 
     <!-- item elements in here --> 
</div> 

이 컬렉션에있는 항목의 수백, 그래서 내 항목 목록에 스크롤 플러그인을 통합하고 싶습니다.

console.log(opts.state.currPage) 증가 페이지 번호 1,2,3 ... 스크롤이 창 모서리에 도달했을 때 내보기 목록에 아무런 영향을 미치지 않습니다.

나는 컬렉션에 다른 것을 추가해야 하는가, 아니면 스크롤로 전체 데이터를 작은 조각으로 분리 할 수 ​​있을지 궁금하다.

내가 조금 멍청하다면 미안 해요! 오신 것을 환영합니다 귀하의 질문에 당신이 내게 제공 할 수있는 내 문제에 대한 도움을 주셔서 감사합니다!

Answer 1

지금 itemView.render()는 모든 것을 렌더링합니다. 렌더링

}, function(json, opts) { 
    var page = opts.state.currPage; 
    listView.render(page-1) // you mentioned that it starts from 1 
}); 

을이 인덱스 매개 변수를 받아 확인하고

render: function(index){ 
    //this.$el.empty(); 
    var loadElements = index * 10; 
    _(this.collection.models.splice(loadElements, loadElements+10)).each(function(_itemData){ 
     var itemList = new ItemView({model : _itemData}); 
     this.$el.append(itemList.el); 
    },this); 
} 

은 다음 플러그인을 호출해야 컬렉션을 스플 라이스});