Jquery – Endless/infinite scroll type solution with backbone.js

Have been reading about backbone and knockoutjs myself lately, and was also pondering about how to leverage the framework with asp.net mvc. One approach to avoid the duplication of models is to serialize (json) the server side viewmodel and use it as your backbone or knockout model. Positive side effect, your client side models already contain the data on page load and don't have to fetch the data via an ajax request when the page is first loaded. I'm aware that only serializing the serverside viewmodel isn't enough for backbone/knockout, but it could be a starting point. Perhaps the serialized model could be a property on the clientside model.

About jquery templates, I usually put a jquery template in a partial view. This way they are easily rendered in your view like this:

<script id="SomeTemplate" type="text/x-jquery-tmpl">
    @Html.Partial("Templates/SomeTemplate")
</script>

Obviously, porting an existing application to leverage jquery templates will take some time and effort.

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)