Question

我有一个2页的SAPUI5应用程序。当我点击一个按钮时，它会从后端抓取数据，然后进入下一页以显示数据。这可能需要一些时间基于数据量，因此我想在页面之间添加忙碌指示器，因此它看起来不像第一页被冻结。问题是繁忙的指示器在第二页加载后才显示，这不是我想要的。

这是我的第一个页面控制器的代码示例，我在其中调用忙碌指示符

onButtonPress: function(){
  //code to grab input data
  var errorsFound = this.checkData();
  if(errorsFound)
       //code to show errors here
  else{
    var BI = new sap.m.BusyDialog();
    BI.open();
    this.processData(); //call function to make ajax call to backend and get data
    this.getOwnerComponent().getRouter().navTo("page2");
    }
 },

checkData: function(){
  //check data for errors;

return errorsFound;  

}

在我的第二页上我有这个

onInit: function(){
  var route = sap.ui.core.UIComponent.getRouterFor(this);
  route.getRoute("page2").attachMatched(this.initController, this);

}

initController: function(){
 //here I have code to grab the data that came back and I set model to display it

 //Dialog doesn't show up until the app hits comes around this point.

}

不确定如何使其工作，繁忙的指示器将不会出现，直到下一页出现。我甚至尝试使用像这个例子中的xml片段，并得到了相同的结果。 https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.BusyDialogLight/preview

任何有关如何做到这一点的指示都将不胜感激。

Answer 1

我认为你做错了。首先，导航第二页，然后加载数据。这将简化您的应用程序，整个事情会感觉更自然。

我看到您正在使用路由器，如果您依赖于特定变量，则可能需要将其更改为包含路由参数。如果您在清单中设置它们，它将类似于：

的manifest.json

"routes": [{
    "pattern": "/page2/{parameter}",
    "name": "page2",
    "target": "page2"
}]

在您的控制器中导航如下：

page1.controller.js

this.getOwnerComponent().getRouter().navTo("page2", {
   parameter: "my-unique-id" 
});

您将找到准备好在数据绑定中使用的参数或匹配模式中事件中的任何其他内容（请注意此处函数的更改）

page2.controller.js

route.getRoute("page2").attachPatternMatched(this.initController, this);

在这种情况下，回调具有您的参数：

page2.controller.js

initController: function(oEvent) {
    var myParameter = oEvent.getParameter("arguments").parameter

    // set the busy indicators and load your data here
}

这种方法的另一个好处是，您可以直接导航到myapp#/page2/my-unique-id，它只会加载所有内容，而无需依赖第1页上的按钮。

Answer 2

尝试将 busy 属性绑定到App控件，并将其默认设置为false，并根据您的要求动态设置true或false。尽量保持简单（不应该用于特定页面。）

如何在切换页面时设置忙碌指示符？

2 个答案: