ibm-mobilefirst - Worklight 多个busyIndi​​cators

Question

是否可以根据上下文有很多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
});

Answer 1

“忙碌指示器是一个单例。如果您创建多个忙碌指示器，显示它们然后隐藏它们 - 所有都将被隐藏。” - 安东（来源）

您可以尝试将其包装在您自己的“单例”中，例如：

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();

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