我试图阻止 jQuery Mobile 在调用 ChangePage 时隐藏加载微调器。
程序流程如下所示,从单击链接开始,该链接的单击事件定义如下:
$('body').delegate('.library-link', 'click', function() {
$.mobile.loading( 'show' );
$.mobile.changePage($('#page-library'));
return false;
});
单击链接后,pagebeforeshow
事件被触发,这会触发一个函数从本地存储填充页面,或者进行 ajax 调用来获取数据。
$(document).on('pagebeforeshow', '#page-library', function(event){
ui.populate_data();
});
In ui.populate_data()
我们从本地存储获取数据或进行 ajax 调用。
ui.populate_data = function() {
if (localdata) {
// populate some ui on the page
$.mobile.loading( 'hide' );
} else {
// make an ajax call
}
};
如果数据存在,我们将数据加载到容器中并隐藏加载微调器。如果没有,它会进行 ajax 调用,该调用完成后将数据保存在本地存储中,并调用ui.populate_data()
问题是,之后pagebeforeshow
事件已完成,changePage 正在调用$.mobile.loading( 'hide' )
,即使数据可能还不存在。除了暂时重新定义之外,我找不到任何方法来阻止 ChangePage 隐藏微调器$.mobile.loading
,这感觉很不对劲:
$('body').delegate('.library-link', 'click', function() {
$.mobile.loading( 'show' );
loading_fn = $.mobile.loading;
$.mobile.loading = function() { return; };
$.mobile.changePage($('#page-library'), {showLoadMsg: false});
return false;
});
在我的 ui 函数中隐藏微调器之前:
ui.populate_data = function() {
if (localdata) {
// populate some ui on the page
if (typeof loading_fn === 'function') {
$.mobile.loading = loading_fn;
}
$.mobile.loading( 'hide' );
} else {
// make an ajax call
}
};
当然,必须有一种方法可以完全控制加载小部件的显示和隐藏,但我找不到它。我尝试通过{showLoadMsg: false}
更改页面,但根据码头的建议,它仅在通过ajax加载页面时执行操作,而我没有这样做。