catch the event when listview is rendered WinJS

Question

I've got a single page app in WinJS. In the default.html (which is default page) I have div where I render other page from the same directory.

<div id="pagebody"><!--Here is page rendered--> </div> 

Now, in that page (which is rendered into that div) I have ListView. In the ListView template, for each ListViewItem I have input control - checkbox

<input name="ListViewCheckBox" type="checkbox"/> <!--in js I fetch all inputs with name ListViewCheckBox-->

Now, I have to catch the event when all inputs have been rendered to be able to do sth with them depending on "application state". In default.js file I call functions WinJS.UI.Pages.render() and WinJS.UI.processAll()

WinJS.UI.processAll().done(function () {
    //if I try to fetch all inputs here, I get list with 0 elements (as expected)
});


WinJS.UI.Pages.render("OtherPage.html", PageBody).done(function () {
     //if I try to fetch all inputs here, I get list with precisely one item
     //it catches input declared in template
     //the problem is that I need input from each listviewitem 
     //(if there are for example 20 listviewitems, and I need to fetch all 20 inputs)
});

I fetch inputs with following line of code:

var Inputs = document.getElementsByName("ListViewCheckBox");

How can I achieve to catch that event when every input is rendered, so I fetch all of them.

Answer 1

I managed to find solution:

WinJS.UI.pages.define("OtherPage.html", {
ready: function (element, options) {
                this.listcontrol = element.querySelector("#myList").winControl;
                var that = this;
                function delayLoad(evt) {
                    if (that.listcontrol.loadingState !== "itemsloaded") return; 
                              //if your list control has any loading animation 
                              //this listener will catch before it is played, 
                              //if you want after animation is done then put state "complete"


                    // infinite loop without this line
                    that.listcontrol.removeEventListener("loadingstatechanged", delayLoad);

                    var inputs = document.getElementsByName("asd");//grab all inputs
                    inputs.length;//length is not anymore 1, but number of items in listview
                }
                this.listcontrol.addEventListener("loadingstatechanged", delayLoad);
            }
}