Vanguard Coder

Simple Life of a Keen Developer

Infinite Scrolling in SPA w/ Durandal

leave a comment

Working with Single Page Apps (SPA), and listening to how John Papa explains it, I’ve become a huge fan of Durandal, and whole-heartedly feel it’s the future. It’s inevitable, that infinite scrolling will have to be implemented.

This means.

1. Skipping what’s already been loaded, and load new items,

2. Ensuring the correct data is loaded, (e.g. if it’s sorted by name, price, etc…)

3. If the infinite scroll is no longer infinite, to not to raise events.

Interestingly, the two variants of I’ve seen are loading based on page – where a page contains a fixed number of items, However, it’s counter intuitive to define a page, as a page no longer exists in infinite scroll, but rather number of elements the user is able to see, thus, an item based scroll seems more intuitive.

Another common issue I’ve seen is working with percentage.

Let’s say a screen displays 20 items, and the window holds 100 items. Each time the person scrolls 80% we load a 100 more. It works fine for the first few scrolls, however, lets say the user is viewing 1000 more, and has reached 800, loading a 100 more might be unnecessary as he is not entirely near the end.

Scrolling is not too daunting to build – esp with Breeze as it is aware of line and we can write skip(numberOfItemsLoaded).Take(numberOfItemsToLoad)

My implementation involved letting Durandal add scroll event on document load, which unbound the scroll event, load more information and attach the event again. This is necessary as the event could be raised when the user is scrolling through the lower parts of the page causing a few multiples of item sets to be loaded.

Written by zkashan

July 11th, 2013 at 7:04 pm

Posted in Uncategorized