Worklight多个busyIndi​​cators

时间:2013-10-30 13:22:54

标签: ibm-mobilefirst busyindicator

是否有可能根据上下文有许多busyIndi​​cators? 我尝试了4,但它不起作用(似乎只使用了最后一个busyIndi​​cator,并且无法隐藏):

以下是代码:

var myBusyIndicator1;
var myBusyIndicator2;
var myBusyIndicator3;
var myBusyIndicator4;
wlCommonInit(){
   myBusyIndicator1 = new WL.BusyIndicator('content', {text : 'Loading data 1'});
   myBusyIndicator2 = new WL.BusyIndicator('content', {text : 'Loading data 2'});
   myBusyIndicator3 = new WL.BusyIndicator('content', {text : 'Loading data 3'});
   myBusyIndicator4 = new WL.BusyIndicator('content', {text : 'Loading data 4'});
}
$('#myPage').on('showpage', function(e, ui){
   myBusyIndicator1.show(); // 'Loading data 4' is displayed in modal window
   //do some stuff
   myBusyIndicator1.hide(); // modal window still, and app is not responsive anymore
});

1 个答案:

答案 0 :(得分:1)

“忙碌的指标是一个单身。如果你创建几个忙碌的指标,显示它们然后隐藏它们 - 所有都将被隐藏。” - Anton(source

您可以尝试将其包装在您自己的“单身”中,例如:

var Busy = (function () {

    var busyObject;

    var _show = function (message, options) {

        //If you're using WL v6.0, 
        //see: https://stackoverflow.com/q/18501456/186909
        WL.ClientMessages.loading = message;
        //Others version of WL may not require 
        //the line above or the message parameter.

        busyObject = new WL.BusyIndicator('content', options);
        busyObject.show();
    };

    var _hide = function () {
        if (busyObject !== null) {
            busyObject.hide();
            busyObject = null;
        }
        //else no busy indicator to hide
    };

    return {
        show: _show,
        hide: _hide
    };

}());

//Usage:
Busy.show('message1', options1);
//Later...
Busy.hide();
//Later...
Busy.show('message2', options2);
//Later...
Busy.hide();

我没有测试上面的代码,它只是为了给读者提供想法,而不是复制/粘贴到项目中。