A page has several tabs on which users click will raise an event of changing the content of listview. All the content should be loaded just one time which means the tab1's content and scroll position should be cached when the content changes from tab1's
to the tab2's, and restored when tab1 is clicked again.
I've tried severval ways.
Plan a: When a tab is clicked, create a new ListView object:
...
var lv = new WinJS.UI.ListView(
listDiv,
{
itemDataSource: dataSource,
oniteminvoked : itemInvokeHandle
}
);
msSetImmdiate(function(){
lv.scrollPosition = scrollPos;
});
...
This could be work well, but the problem is the itemInvokeHandle will be called for several times if user change tabs before clicking an item so that WinJS.Navigation.navigate could not work normally.
Plan b: Just create ListView object once and change itemDataSource.
//Global
var lv
...
function calledSomeWhere(data){
if(lv){
lv.itemDataSource = data.dataSource;
lv.scrollPosition = data.scrollPos;
}else{
lv = new WinJS.UI.ListView(
listDiv,
{
itemDataSource:data.dataSource,
oniteminvoked : itemInvokeHandle
}
);
msSetImmidate(function(){
lv.scrollPosition = data.scrollPos;
});
}
}
This will not cause the problem of invoking itemInvokeHandle repeatly but it couldn't scroll ListView to the cached position.
Which plan is better and could you please figure out the problem of it? Do you have some advice to implement this in a more efficient way?
Thank you.
