(1) File | New Project ... | Template=JavaScript => Grid App template
(2) Open groupDetail.js, look at lines 39-57:
// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
var listView = element.querySelector(".itemslist").winControl;
if (lastViewState !== viewState) {
if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
var handler = function (e) {
listView.removeEventListener("contentanimating", handler, false);
e.preventDefault();
}
listView.addEventListener("contentanimating", handler, false);
var firstVisible = listView.indexOfFirstVisible;
this._initializeLayout(listView, viewState);
if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
listView.indexOfFirstVisible = firstVisible;
}
}
}
},
I'm confused about the purpose of adding an event listener for "contentanimating" ... it seems that the only thing the handler (defined in the anonymous method above it) is attempting to do is first DISABLE the event listener then call preventDefault().
This happens when the ViewState changes to "snapped".
SO what is it about the "contentanimating" event that we're trying to mitigate by calling e.preventDefault()? Is it some default animation that we're attempting to stop in its tracks? My attempts at finding documentation on this haven't been
successful, so any insight would be most appreciated!
