lightweight infinite scroll with backbone.js

Question

i've looked at pagination in backbone https://gist.github.com/838460, and it all seems very heavy handed for what I'm looking for.

I want to do an infinite scroll type paging, and I'm new to backbone, so maybe I'm just not understaning it correctly.

what I thought I would do is get the first collection, click a 'next' button, and get the results and just append that to the original collection and render the newly added items.

So I have this in my Router I have an index function

    if(!myApp.list){
        myApp.list = new myApp.collections.list;
        myApp.list.page = 1;
        } else {
        myApp.list.page++;
        }
        myApp.list.url='/recipes?page='+myApp.list.page;

        myApp.list.fetch({
            add: true,
            success: function() {
                new myApp.views.list({ collection: myApp.list});
            },
            error: function() {
                new Error({ message: "Error loading documents." });
            }
        });

which will create the collection if it does't exist, and if it does exist, increment the 'page' before requesting the next items in the list.

so the first part of my question is, is there anything wrong with this way of doing things?? Seems much simpler than the other solutions I've seen.

Question #2 seems ridiculous, but how do I then trigger the 'next' button to get the next list??

In my view, I have a 'next' button, but calling myApp.routers.list.index or myApp.views.list doesn't give me an updated list.

Answer 1

It's normal that myApp.routers.list.index() doesn't work if there is the declaration of the Router, you need to call the instance of the router. There are many things to say and I think the best explication is to see the code work and if It's that you want, learn the code.

I created an infinite listing with a "More" button to add models on the listing with using your code. The demo is on nodejitsu here : http://infinite-scroll.eu01.aws.af.cm/

You can show the complete code (client and server) on my gist on GitHub : https://gist.github.com/1522344 (I added a comment to explain how use the files)