I have a page in my winjs app, and on the ready function I assign a function to the onloadingstatechanged
event of a list view in the page. Then I check when that is compelte and so on and so forth as usual.
var buttonsListView = document.querySelector(".buttons-container .itemslist").winControl;
buttonsListView.onloadingstatechanged = function (args) {
if (args.srcElement === buttonsListView.element && buttonsListView.loadingState === "complete") {
//MY CODE HERE
buttonsListView.onloadingstatechanged = null;
}
}.bind(this);
Here is the HTML:
<div class="buttons-container">
<div class="buttonTemplate" data-win-control="WinJS.Binding.Template">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'', type:'button'}" data-win-bind="winControl.label: buttonName; winControl.icon: icon"></button>
</div>
<div class="itemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{
layout: {type: WinJS.UI.GridLayout},
selectionMode: 'none',
itemTemplate: select('.buttons-container .buttonTemplate'),
itemDataSource: null,
oniteminvoked: RapportPage.buttonNavigate
}">
</div>
</div>
My problem is that if I navigate to another page and then press the back button, the ready event gets fired but the onloadingstatechanged
does never happen.
I found the problem.
Referring to the listview by class .itemslist it does not work. Something works differently in the listview when you are coming back from another page as opposed as to when you navigete to the page directly.
So I just assigned an ID to the ListView div and then load the dom object like this instead:
var buttonsListView = document.querySelector("#buttonList").winControl;