When are the items in a listview available in the dom?

Question

I have a page with a listView. I need to read the position of the last item in the listView once is loaded, but I can't find the right moment or event to do it. Basically I can't find a way to determine if all the items are loaded in the list.

This is my ready function, as you can see I can find when the listView load is complete, but it seems like even at that point the items are not available in the DOM:

There is only one list in the page.

ready: function (element, options) {

    //now the onloadingstatechanged evenet for the list
    var listView = element.querySelector(".itemslist").winControl;
    listView .onloadingstatechanged = function (args) {
        if (args.srcElement === listView .element && listView .loadingState === "complete") {

            debugger;

            /* THIS LINE SHOULD WORK IF THE ITEMS WERE LOADED, items IS INSTEAD null*/
            var items = element.querySelector(".itemslist .win-itemsblock");

            listView .onloadingstatechanged = null;
        }
    };
}

Here is the listView in my DOM object when the app stop at the debugger; instruction:

and here is the listView in my DOM object after the program run til the end:

Answer 1

Type debugger; in the event body and then inspect the DOM using the DOM Inspector and see if your ListView has been fleshed out. You're right that when the loading state is complete you should have access to the DOM elements, so perhaps there's something wrong with your selector.