Detect scrolling event on listview with winjs - winjs

Question

I need to load more items as soon as the user scroll to the end of my list view.
I tried to use the microsoft sample : http://code.msdn.microsoft.com/windowsapps/ListView-loading-behaviors-718a4673/view/SourceCode (scenario 2) but it seams that list view have not the same behavior in windows phone 8.1.
When I run the sample I can see that only viewable contents are loaded (eg 5items of 50).
But for windows phone it does load all items.
I use this code :
listView.winControl.itemTemplate = this.incrementalTemplate;
incrementalTemplate: function (itemPromise, recycledElement) {
if (!recycledElement) {
recycledElement = document.createElement('div');
}
var renderComplete = itemPromise.then(function (item) {
console.log(item.index);
itemTemplate.winControl.render(item.data, recycledElement);
return item.ready;
}).done(function (item) {
console.log("clp"+item.index);
});
return { element: recycledElement, renderComplete: renderComplete };
},
Items are loaded asynchronusly. I can see in my console that it print 50 times the index and 50times the clp+index. Even if my list just show 5 items at a time.
Also it seems that my listview never fired the loading state event
listView.addEventListener("loadingstatechanged", function (args) {
//never fired
}, false);

Answer 1

The listview is in a hub, the solution was to add an onscroll event on the win pivot item:
document.querySelector(".win-pivot-item-content").onscroll = function () {
if (self.scrollAtBottom(this) === true) {
//load more
}
};
scrollAtBottom : function(element){
return element.scrollHeight - element.scrollTop === element.clientHeight
},

Answer 2

If you want to subscribe to event when the ListView was scrolled, you can take ListView's Scrollviewer and subscribe to ViewChanged event. The only problem is that I do not know how it would look like in winjs, in C# it can look like that:
// method to pull out a ScrollViewer
public static ScrollViewer GetScrollViewer(DependencyObject depObj)
{
if (depObj is ScrollViewer) return depObj as ScrollViewer;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
var child = VisualTreeHelper.GetChild(depObj, i);
var result = GetScrollViewer(child);
if (result != null) return result;
}
return null;
}
// subscription:
GetScrollViewer(yourListView).ViewChanged += yourEvent_ViewChanged;
Maybe it will help.

Answer 3

The comment voted here as solution does not work just like that out the box, however I found a solution to this problem starting from that.
See my first answer on the issue I opened at https://github.com/winjs/winjs/issues/690#issuecomment-61637832 (includes code snippet)