3

我试图在调用 changePage 时阻止 jQuery Mobile 隐藏加载微调器。

程序流程是这样的,从点击一个链接开始,它的点击事件定义如下:

$('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(); 
});

我们从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}给changePage,但正如文档所建议的那样,它仅在通过ajax加载页面时才起作用,而我没有这样做。

4

1 回答 1

1

也许对很多人来说太多了,但我找到了除了评论中写的以外的解决方案(这对我不起作用)。

我使用jquery 移动路由器并在页面的“显示”事件中使用$.mobile.loading("show");,所以当页面出现时,它会显示加载微调器。

虽然要隐藏微调器,但我不得不使用$('.ui-loader').hide();,这很奇怪,我知道......

我更多地使用 Jquery Mobile Router,但它解决了这个问题。

(也许只听正确的事件并触发微调器也可以工作,因为这就是 JQMR 所做的......)

我正在使用 JQM 1.4.2 ...

于 2014-08-10T02:43:59.293 回答