如何停止jQuery Mobile在changePage期间调用$ .mobile.loading('hide')? [英] How to stop jQuery Mobile calling $.mobile.loading('hide') during changePage?

问题描述

当试图调用changePage时，我试图阻止jQuery Mobile隐藏正在加载的微调框.

I'm trying to stop jQuery Mobile hiding the loading spinner when changePage is called.

程序流程是这样的，从单击链接开始，该链接的click事件定义如下:

The program flow goes like this, starting with clicking a link, which has its click event defined like this:

$('body').delegate('.library-link', 'click',  function() {
    $.mobile.loading( 'show' );
    $.mobile.changePage($('#page-library'));
    return false;
});

单击链接后，将触发pagebeforeshow事件，该事件触发一个函数，该函数从本地存储中填充页面，或者进行ajax调用以获取数据.

Upon clicking the link, the pagebeforeshow event is fired, which triggers a function to populate the page from the local storage, or else make an ajax call to get the data.

$(document).on('pagebeforeshow', '#page-library', function(event){
   ui.populate_data(); 
});

在ui.populate_data()中，我们从本地存储中获取数据或进行ajax调用.

In ui.populate_data() we get the data from local storage or make an ajax call.

ui.populate_data = function() {
    if (localdata) {
        // populate some ui on the page
        $.mobile.loading( 'hide' );
    } else {
        // make an ajax call
    }
};

如果有数据，我们将数据加载到容器中并隐藏加载微调器.如果不是，它将进行ajax调用，此操作将完成，将数据保存在本地存储中，然后调用ui.populate_data()

If the data is there, we load the data into the container and hide the loading spinner. If not it makes the ajax call, which on complete saves the data in local storage, and calls ui.populate_data()

问题是，在pagebeforeshow事件完成后，即使数据可能还没有，changePage仍在调用$.mobile.loading( 'hide' ).除了暂时重新定义$.mobile.loading之外，我找不到其他方法来防止changePage隐藏微调框，这感觉很不对:

The problem is, after the pagebeforeshow event is finished, changePage is calling $.mobile.loading( 'hide' ), even though the data might not be there yet. I can't find any way to prevent changePage from hiding the spinner, other than by temporarily redefining $.mobile.loading, which feels pretty wrong:

$('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函数中隐藏微调框之前:

and before hiding the spinner in my ui function:

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加载页面时才起作用，而我没有这样做.

Surely there must be a way to get complete control over the showing and hiding of the loading widget, but I can't find it. I tried passing {showLoadMsg: false} to changePage, but as suggested by the docs it only does things when loading pages over ajax, which I'm not doing.

推荐答案

也许对很多人来说太多了，但是我找到了除了注释中写的以外的解决方案(对我不起作用).

Maybe it's too much for many, but I found a solution other than the written in the comments (which didn't work for me).

我使用 jquery移动路由器，并且在页面的显示"事件中，我请执行$.mobile.loading("show");，因此当页面显示时，它会显示正在加载的微调器.

I use the jquery mobile router and in the 'show' event of a page, I do $.mobile.loading("show");, so when the page appears it does with the loading spinner showing.

尽管要隐藏微调框，但我不得不使用$('.ui-loader').hide();，这很奇怪，我知道...

Though to hide the spinner, I had to use $('.ui-loader').hide();, which is weird, I know...

我更多地使用了Jquery Mobile Router，但是它解决了这个问题.

I use Jquery Mobile Router for a lot more, but it solved this issue.

(也许只是听适当的事件并触发微调器也可以，因为这是JQMR所做的...)

(Maybe just listening to the proper event and triggering the spinner would also work, as this is what JQMR does...)

我正在使用JQM 1.4.2 ...

I'm using JQM 1.4.2...

这篇关于如何停止jQuery Mobile在changePage期间调用$ .mobile.loading('hide')?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！