javascript - Infinite scroll js with backbone -

javascript - Infinite scroll js with backbone -

i'm stuck issues 3 consecutive days, have been trying utilize https://github.com/paulirish/infinite-scroll create scrolling in backbone project.

i attempted find reply question search engine unable to. beginner developer backbone.js.

view of item list :

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); } });

view of item list view :

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(); });

item collection :

var itemcollection = backbone.collection.extend({ model : itemmodel, url : rootwebsite });

and divided item list , item template different html file.

item list template :

<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 nail end" , appendcallback : false, path: ["http://localhost/website/#itemlist"] }, function(json, opts) { var page = opts.state.currpage; }); }); </script>

item template :

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

there hundreds of item in collection, integrate scrolling plugin item list.

console.log(opts.state.currpage) increment page number 1,2,3... when scrolling reached corner of windows , doesn't have effect on list of view.

i wonder, have add together else collection, or how can scroll separate total info little pieces.

i'm sorry if i'm bit noob! welcome question , help problem can provide me!

at moment itemview.render() renders everything. create take index parameter, , splice collection

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); }

then plugin should phone call render

}, function(json, opts) { var page = opts.state.currpage; listview.render(page-1) // mentioned starts 1 });

});

javascript jquery backbone.js infinite-scroll